Установка смещения в jQuery

Question

Мне нужна помощь в следующем: у меня есть меню, которое я хочу сохранить фиксированным, когда страница прокручивается вниз. Первая часть страницы белая, а затем после 800 пикселей все остальное - черный фон. Я хочу, чтобы изменить цвет меню на белый, когда пользователь прокручивается в черный раздел. Я знаю, как изменить его, добавив и удалив классы в jQuery, но у меня возникают проблемы с написанием кода, как определить, сколько страниц прокручивается. Я считаю, что это должен быть простой оператор if, вычисляющий верхнее смещение, но я действительно не могу решить его сам.

Спасибо, Мирко

Answer 1

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

Answer 2

$(window).scrollTop() даст вам количество пикселей пользователь прокручиваются.

Вы должны действительно опубликовать примерный код, если хотите получить более подробную помощь.

Answer 3

Вы можете сравнить

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

в

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

Если первое больше последнего, а затем изменить цвет меню и, если нет, то изменить его обратно.

Эта информация обрабатывает будущие изменения в макете вашей страницы (т. Е. Если черная секция страницы заканчивается ровно на 800 пикселей сверху).

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

В этом примере меню переключается с зеленого на красный, где меняется фон от черного до желтого.