Ergebnis 1 bis 3 von 3

Thema: Navbar zeigen bei Scrollen

  1. #1
    HTML Newbie
    Registriert seit
    31.08.2014
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navbar zeigen bei Scrollen

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Navbar zeigen bei Scrollen

    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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    31.08.2014
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navbar zeigen bei Scrollen

    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.
    Geändert von theschmidey (01.03.2015 um 23:45 Uhr)

Ähnliche Themen

  1. Horizontale Navbar - Paar Fragen
    Von rodaN im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 23.11.2014, 21:16
  2. Navbar dropdown nebeneinander nicht untereinander
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.10.2012, 21:03
  3. Portal Link im Template navbar nicht auffindbar...?
    Von Alienx im Forum Webanwendungen - Webapplikationen
    Antworten: 0
    Letzter Beitrag: 03.10.2007, 15:56
  4. Problem mit CSS-Navbar und IFrame
    Von hubikon im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 02.06.2005, 00:17
  5. Problem mit XML und navbar
    Von Bixas im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.10.2003, 19:48

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •