1

Есть div с классом class1, при прокрутке страницы на определённое количество пикселей, ему надо присвоить class2, при возврате вверх — вернуть class1. Как реализовать, скажите пожалуйста? Спасибо.

3 ответа 3

1

Нужно при каждом событии скролла сверять значение 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>

0
$(window).scroll(function(){
    if ($(window).scrollTop() > 100) {
        $('.class1').addClass('class2');
    }
    else {
        $('.class1').removeClass('class2');
    }
});

нашёл вот такое решение, мне помогло, может кому пригодится

0
var scrollPos = 0;
$(window).scroll(function(){
   var st = $(this).scrollTop();
   if (st > scrollPos){
     $('#result').html('Вниз');
   } else {
     $('#result').html('Вверх');
   }
   scrollPos = st;
});
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 9 мар в 11:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.