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

Question

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

Спасибо, Mirko

Answer 1

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

Answer 2

Вот пример с использованием 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");      
    }
});

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

Answer 3

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

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

с

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

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

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

Answer 4

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

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