Есть div
с классом class1
, при прокрутке страницы на определённое количество пикселей, ему надо присвоить class2
, при возврате вверх — вернуть class1
. Как реализовать, скажите пожалуйста? Спасибо.
3 ответа
Нужно при каждом событии скролла сверять значение document.body.scrollTop
с заданным вами количеством пикселей и в зависимости от результата показывать или скрывать класс.
let el = document.querySelector('.toggleClass');
window.addEventListener('scroll', toggleClassOnScroll.bind(el, 150));
function toggleClassOnScroll(pxAmount) {
let scrollTop = document.body.scrollTop;
if(scrollTop > pxAmount) {
this.classList.add('toggleClass--active');
} else {
this.classList.remove('toggleClass--active');
}
}
body {
margin: 0;
min-height: 300vh;
}
.toggleClass {
position: fixed;
height: 100px;
width: 100%;
background-color: #ccc;
transition: background-color .3s;
}
.toggleClass--active {
background-color: #000;
}
<div class=toggleClass></div>
$(window).scroll(function(){
if ($(window).scrollTop() > 100) {
$('.class1').addClass('class2');
}
else {
$('.class1').removeClass('class2');
}
});
нашёл вот такое решение, мне помогло, может кому пригодится
var scrollPos = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st > scrollPos){
$('#result').html('Вниз');
} else {
$('#result').html('Вверх');
}
scrollPos = st;
});
-
пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 9 мар в 11:58