Berechnen Sie die Bildschirmgröße in einem sticky header

Question

Es gibt Tonnen von Tutorials/Beispiele zum Erstellen eines Header-Stick auf Scroll für feste Höhe Header. Ich arbeite jedoch an einer einseitigen Website und der erste Abschnitt ist ein Vollbild. Der Benutzer scrollt dann nach unten, um die Kopfzeile und andere Inhaltsbereiche anzuzeigen.

Also meine Frage ist, wie kann ich meinen Code ändern, um die Ansichtsfenster/Bildschirmgröße zu berücksichtigen - anstatt eine feste Headergröße zu verwenden?

Mein vorhandenen Code ist:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 65) { 
     $(".main").addClass("sticky"); 
    } else { 
     $(".main").removeClass("sticky"); 
    } 
}); 

Answer 1

Sie die Höhe des Fensters statt einen festen Wert verwenden könnte (da Sie sprechen von einem Vollbild, vermute ich seine Höhe gleich die Fensterhöhe):

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= $(window).height()) { 
     $(".main").addClass("sticky"); 
    } else { 
     $(".main").removeClass("sticky"); 
    } 
}); 

Sie auch die Höhe des ersten Abschnitts bekommen konnte, wenn es kleiner ist als das Fenster

Answer 2

ich weiß nicht, ob es eine bessere Lösung, aber hier‘ meine Lösung s:

$(window).scroll(function() {  
var scroll = $(window).scrollTop(); 

if (scroll >= $(window).height()*0.2) { //0.2 for 20% of the viewport height, you can change this value if you need to 
    $(".main").addClass("sticky"); 
} else { 
    $(".main").removeClass("sticky"); 
} 
}); 

I $(window).height() nur verwendet, um die Darstellungshöhe zu erhalten.