JQuery - сумма scrollTop() каждый раз, когда я прокручиваю
Я пытаюсь добавить класс, когда scrollTop() < 442. Поскольку событие не запустилось, я попытался console.info() значение scrollTop(). Консоль выводит сумму каждого движения прокрутки. Например, я прокрутил 200 пикселей вниз, я прокрутил 100 пикселей вверх и console.info($('body').scrollTop()) вывел 300.
Вот код:
$('body').scroll(function(){
console.info($('body').scrollTop());
if ($('body').scrollTop()<442){
$('nav').addClass('navz');
}else{
$('nav').removeClass('navz');
}
});
Я использовал $('body').scroll вместо $(window).scroll, потому что html имеет overflow:hidden, поэтому $(window).scroll не работает. Я не могу удалить или изменить переполнение, потому что это изменит некоторые эффекты CSS.
извините, я просмотрел свой код и вставил неправильный, я собираюсь исправить его, но я только вывожу $('body').scrollTop()console.info($('body').scrollTop())
Можете ли вы создать простой пример jsfiddle/codepen, чтобы воспроизвести вашу проблему? Мне нет смысла печатать сумму, но из кода, который вы разместили, нет никаких признаков того, что что-то не так.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в том, что вы неправильно используете 'body' в качестве селектора как для прослушивателя событий прокрутки, так и для функции scrollTop().
Вместо этого вы должны использовать $(window).scroll() и $(document).scrollTop().
Вот рабочий пример:
// The window has a scroll event, not 'body'
$(window).scroll(function() {
// The document has the scrollTop fn, not 'body'
console.info($(document).scrollTop());
if ($(document).scrollTop() < 442) {
$('nav').addClass('navz');
} else {
$('nav').removeClass('navz');
}
});body {
height: 300vh;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
что вы имеете в виду под «суммой», вы выводите два значения, регистрируете только scrollTop тела. Каков фактический элемент со свитком? Тег HTML или BODY? используйте тот, а не оба. Вы говорите, что ваш html имеет overflow: hidden, поэтому нет смысла добавлять прослушиватель событий в элемент HTML.