Wie man einen sticky header schaltet?

Question

Der folgende Code erstellt einen sticky-Header, der angezeigt wird, sobald Sie 100px herunterscrollen. Wie kann ich den Sticky-Header ausschalten, wenn ich einen unteren Teil der Seite erreiche? Sagen wir 800px?

Danke!

$(window).scroll(function() { 
if ($(this).scrollTop() > 100){ 
    $('header').addClass("sticky"); 
    } 

    else{ 
    $('header').removeClass("sticky"); 
    } 
}) 

Answer 1

Meinst du das?

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100 && $(this).scrollTop() < 800) { 
     $('header').addClass("sticky"); 
    } else{ 
     $('header').removeClass("sticky"); 
    } 
}) 

Answer 2

Sie könnten eine weitere Bedingung für hinzufügen, wenn sie die Seite zu 800px bekommt:

$(window).scroll(function() { 
    if (($(this).scrollTop() > 100) && ($(this).scrollTop() < 800)){ 
     $('header').addClass("sticky"); 
    } 
    else{ 
     $('header').removeClass("sticky"); 
    } 
}); 

In meinem Beispiel:

• $(this).scrollTop() ist die Variable die Spitze der Ansicht, die
• Der erste Teil der if statement fügt die Bedingung für die Addition 100px
hinzu
• Der zweite Teil der if statement fügt die Bedingung für die 800px Entfernung

Answer 3

ich nur vorschlagen würde, CSS zu verwenden. Wenn das Navy stickig ist, sollte es nicht ständig sticky bleiben und dann dem Hauptinhaltshalter einen Rand hinzufügen, um Platz für das Nav zu schaffen. Zum Beispiel: wenn das nav ist 108px hoch auf dem Desktop-Einsatz:

.main-content-holder{ 
    position:relative; 
    display:block; 
    margin-top:108px 
} 

dann höhenverstellbar und/oder Position mit Medienanfragen.