Menü bleibt oben "kleben" - Wie geht das?

ezekiel23 · 08.01.2014

Hi,

kann mir jemand sagen, was zu tun ist, um sein Menü am oberen Fensterrand zu fixieren, sobald der User im Seiteninhalt weiter nach unten scrollt? Zum Beispiel macht das Giga so (ihr müsst erst ein wenig nach unten scrollen, damit der Balken oben kleben bleibt): http://www.giga.de/

Im Grunde ist es sogar ein anderer Div-Container, der quasi automatisch erscheint. Ist das mit jQuery gelöst?

Mathuseo · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Responsive weißt die Lösung von Giga allerdings eine kleine Schwäche auf. Es bleibt beim nach unten scrollen durch die gesamte Seite nur die Apple-Kategorie am oberen Bildschirmrand hängen: http://mattkersley.com/responsive/

Ein HTML-Element kannst du mit folgendem CSS am oberen Bildschirmrand fixieren:

position: fixed;
top: 0;

Das automatische Erscheinen des Menüs ist mit JavaScript gelöst. Womöglich auch mit einem Framwork wie jQuery. Zumindest läd Giga die jQuery-Bibliothek. Mal abwarten ob hier jemand eine Lösung gleich zur Hand hat, ansonsten schreibe ich dir mal eine zusammen.

Pixelaner · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Moin,

ich hab dir fix etwas gebastelt. Ich hoffe das hilft dir weiter:

http://jsfiddle.net/kRXCL/1/

MfG
Pixelaner

ezekiel23 · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Hallo Ihr Zwei,

cool danke!!

Pixelaner · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Hi,

gerne

MfG
Pixelaner

ezekiel23 · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

@Pixelaner,

woran kann es liegen, dass bei mir die Leiste/ das Menü durchweg zu sehen ist und nicht erst beim auslösen der Funktion scollTop()?

Pixelaner · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Du hast womöglich die jQuery Bibliothek nicht mit eingebunden. In dem kleinen Script wird in der zweiten Zeile das Menü mit der ID "topmenu" versteckt. Wenn dies schon nicht ausgeführt wird, ist es ein Indiz dafür, dass die Scriptausführung nicht funktioniert.

ezekiel23 · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

jQuery ist in der Version 1.10.1 drin. Das faden funktioniert auch, hatte leider den falschen Pfad zu meiner eigenen JavaScript-Datei angegeben

Das Problem das ich jetzt habe ist, dass die Leiste erst einmal sichtbar ist, ich scrolle und sie verschwindet sofort und wenn ich den Wert von showmenuat erreicht habe, erscheint es wieder. Also alles prima, bis auf, dass die Leiste bereits zu Beginn sichtbar ist. Wie kann ich das noch beheben? Dann ist alles super

Pixelaner · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Code:

$('#topmenu').hide();

ist noch im Script vorhanden? Vorrübergehend kannst du es so lösen, indem du das Menü per CSS ausblendest:

Code:

#topmenu { display:none; }

ezekiel23 · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Mit dem Ausblenden via CSS funktioniert es. Warum die hide-Funktion im .js nicht ausgelöst wurde, ist mir ein Rätsel?! Dann eben via CSS

Oder hat das Nachteile, z.B. Responsivness? Browser-Kompatibiltät oder ähnliches?

Pixelaner · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Der einzige Nachteil wäre, dass das Menü nicht angezeigt wird sobald Javascript auf einem Client deaktiviert wurde.

Da ist halt die Frage ob es überhaupt angezeigt werden muss. Oftmals sinds ja nur Gimmicks oder weitere Bedienhilfen.

ezekiel23 · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Ja genau, wenn das der einzige Nachteil ist, dann ist es im Prinzip keiner, da es sich um einen Nutzermehrwert handelt, der bei Verzicht keinen Nachteil darstellt.

Vielen Dank für Deine Hilfe, wirklich TOP!!

Pixelaner · 08.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Ok dann wünsche ich dir viel Spaß bei der weiteren Arbeit an deinem Projekt.

Hab ich gern gemacht.

dn3d_fanboy · 13.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Danke für das Script, aber wo füge ich das ein?

Pixelaner · 13.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Vorzugsweise bindest du jQuery und das Script vor dem schliessenden

Code:

</body>

ein.

dn3d_fanboy · 13.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Pixelaner schrieb:
Vorzugsweise bindest du jQuery und das Script vor dem schliessenden

Code:

</body>

ein.

Das funktioniert leider auch nicht.
Hier mal mein Markup:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title></title>
  
    <link rel="stylesheet" type="text/css" href="style.css" media="all" charset="utf-8" />
    <link href="http://fonts.googleapis.com/css?family=Smythe" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css" />
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   
</head>

<body>

    <div id="header-full">
          <div id="header"></div>
   </div>
    
    <div id="wrapper">
          <div id="slider"></div>
    </div>    
    
    <div id="main">
        <div id="content"></div>
   </div>
        
    
    
    <div id="footer-full">
          <div id="footer"></div>
    </div>
    
<script>
    var showmenuat = 150; // 50 = gescrollte Pixel von oben
$('#header').hide();
$(window).scroll(function(){
    if($(window).scrollTop() > showmenuat){
        $('#header').fadeIn();
    } else {
        $('#header').fadeOut();
    }
});
</script>
    
</body>
</html>
<!-- Ende footer.php   --->

Myhar · 13.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Was steht in deiner style.css drinnen? So ist es nur eine leere Seite, da kann noch nichts erscheinen.
Oder soll einfach dummy-text in die einzelnen Bereiche eingefügt werden?

radiothek · 13.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Hallo,

wenn Du

HTML:

<script src="(http:|https:)//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

noch ein http: bzw https: vor den // angibst, dann sollte auch Dein ein- & ausblenden funktionieren.

Pixelaner · 13.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

und testweise bitte mal #header durch #header-full im script austauschen

dn3d_fanboy · 13.01.2014

AW: Menü bleibt oben "kleben" - Wie geht das?

Pixelaner schrieb:
und testweise bitte mal #header durch #header-full im script austauschen

Danke Pixelaner,
aber leider auch hier keine Veränderung.

Hier sind noch die CSS-Angaben:

Code:

* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  list-style: none;
}

html, body {
  min-width: 100px;
  min-height: 100%;
}

body {
  font-size: 100%;
  background: #eeda93 url(images/body-bg.jpg);
}



/* --| Header |------------------------------- */
#header-full    {position: fixed;
                width: 100%;
                height: 75px;
                background: #fff;
                -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.7);
                box-shadow: 0 3px 3px 0 rgba(0,0,0,0.7);
                z-index: 3;}


#header {
width: 960px;
height: 160px;
background: url(images/header-bg.png);
margin: 0 auto;
z-index: 4;
}

/*#header-logo    {height: 200px;
                    width: 290px;
                    background:    url(../images/logo-and-box.png);
                    float: left
                    }*/

/* --| Wrapper |------------------------------- */

#wrapper    {/*position: relative;*/
            width: 960px;
            height: 100%;
            margin: 0 auto;
            z-index: 1;
            }

#slider    {/*position: relative;*/
        width: 960px;
        height: 300px;
        background: #000 url(images/slide01.jpg);}

#main    {position: relative;
        width: 100%;
        min-height: 700px;
        background: #efefef;
        -webkit-box-shadow: 0 -3px 3px 0 rgba(0,0,0,0.7);
        box-shadow: 0 -3px 3px 0 rgba(0,0,0,0.7);
            z-index: 2;
        }
        
#content    {
            width: 960px;
            min-height: 700px;
            }