Navbar zeigen bei Scrollen

theschmidey

Schönen Sonntag,

ich bin auf der Suche nach der jQuery Funktion die mir das Menü beim Scrollen erscheinen lässt. Bin auf die Seite http://sailingcollective.com/ gestoßen und dachte mir das "fake" ich mal. Hab's oft gesehen, dass sich das Menü verschwinden lässt, ist aber nicht so mein Ding. Aus Google werd ich i.M. auch noch nicht schlau.

Wenn einer von euch nen Link hätte, wäre klasse!

-theschmidey

threadi

Das Geheimnis bei dieser Seite ist lediglich, dass die Klasse "navbar-inverse" beim Scrollen entfernt wird. Dadurch wird sie dann sichtbar.

Bezogen auf jQuery müsstest Du also beim Scrollen prüfen, ob der Viewport ganz oben ist. Hilfreich dafür ist diese Funktion:
http://api.jquery.com/scroll/

Wenn der Viewport nicht oben ist, müsstest Du nur die entsprechende CSS-Klasse setzen um das Menü oder was auch immer einzublenden.

Eine fertige Funktion für exakt das gibt es nicht. Du musst sie dir aus den zur Verfügung stehenden Funktionen auf Basis deines HTML- und CSS-Codes selbst entwerfen.

theschmidey

Aha, ist mir auch grad aufgefallen...die Klasse inverse versteckt die Leiste und beim Scrollen wird es aufgehoben und inverse fällt weg und die normale Klasse tritt in Kraft. Soso, wieder was dazu gelernt...

Edit: nur aus der Funktion die du mir gezeigt hast, werde ich mit diesem Zusammenhang nicht so recht schlau...kannst du mir da evt. nochmal auf die Sprünge helfen?

Edit2: ich danke dir, habs jetzt doch zusammengebastelt, mit dem entfernen hast du mir nen guten Tipp gegeben. Sieht mit jQuery wie folgt aus:

Code

$(window).scroll(function() {


    if ($(window).scrollTop() > 100) {
        $('.main_h').addClass('sticky');
    } else {
        $('.main_h').removeClass('sticky');
    }
});

Kann nun geschlossen werden.

Tags