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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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