在jQuery中設置偏移量

Question

我需要以下方面的幫助，我有一個菜單，當頁面向下滾動時，我想保持固定。頁面的第一部分是白色，然後是大約800px，其餘部分是黑色背景。 我希望能夠在用戶滾動到黑色部分時將菜單的顏色更改爲白色。 我知道如何通過在jQuery中添加和刪除類來更改它，但是我在編寫代碼時遇到了問題，即如何檢測滾動頁面的數量。 我相信它應該是一些簡單的，如果語句計算頂部偏移量，但我真的不能自己解決它。

感謝， 米爾科

Answer 1

$(document).scroll(function(){ 
    if($(document).scrollTop() >= max) { 
     // do something 
    } 
}) 

Answer 2

$(window).scrollTop()會給你一個用戶滾動的像素數。

如果您需要更詳細的幫助，您應該發佈一些示例代碼。

Answer 3

您可以比較

$("#menu").offset().top 

到

$("#blackDiv").offset().top 

如果前者大於後者，然後更改菜單顏色，如果沒有，就改回來。

這將處理將來對頁面佈局所做的更改（即，如果頁面的黑色部分從頂部停止正好是800px）。

Answer 4

以下是example，使用offset().top，如@bricriu所示。

HTML：

<div id="menu"> MENU </div> 
<div class="darkBackground"> 
</div> 
<div class="lightBackground"> 
</div> 

CSS：

.darkBackground{height:400px; background-color:black;} 
.lightBackground{height:400px; background-color:yellow;} 
#menu{height:30px; width:100%; position:fixed; background-color:red; top:150px; color:white;} 
#menu.darkMenu{background-color:green;} 

的Javascript：

$(window).scroll(function() { 
    console.log("menu: "+$("#menu").offset().top+" background: "+$(".lightBackground").offset().top); 
    if($("#menu").offset().top > $(".lightBackground").offset().top){ 
     $("#menu").addClass("darkMenu"); 
    }else{ 
     $("#menu").removeClass("darkMenu");  
    } 
}); 

在這個例子中的菜單切換由綠變紅了背景的變化，從黑色到黃色。