在粘性標題中計算屏幕大小

Question

有大量的教程/示例爲固定高度標題滾動標題。但是，我正在單頁網站上工作，初始部分是全屏圖像。用戶然後向下滾動顯示標題和其他內容區域。

所以我的問題是，我怎樣才能改變我的代碼，以考慮到視口/屏幕大小 - 而不是使用固定的頭大小？

我現有的代碼是：

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

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

Answer 1

您可以使用窗口而不是一個固定值的高度（因爲你在談論一個完整的畫面，我猜它的高度等於窗口的高度）：

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

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

你也能拿第一部分的高度，如果它比窗口小

Answer 2

我不知道是否有更好的解決方案，但在這裏」我的解決方案：

$(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"); 
} 
}); 

我剛剛使用$(window).height()來獲取視口高度。