Как добавить удалить класс при скролле в нужном месте?

118
18 августа 2018, 14:10

В разметке есть три блока, которые при скролле должны меняться. Т.е. на определенной высоте к div'у добавляем класс, при дальнейшей прокрутке после добавления класса допустим на 100px удаляем класс. Реализовать добавления класса не проблема, а вот удалить класс на заданной высоте не получается. Если использовать else $('.news1').removeClass('active'); то этот вариант не подходит т.к. класс добавляется после определенный высоты прокрутки и удаление происходит при меньшей заданной высоте прокрутки.

<div class="news news1 wrap-b2-txt">
    <h6>lorem</h6>
    <p>lorem lorem lorem</p>
</div>
<div class="news news2 wrap-b2-txt">
    <h6>lorem</h6>
    <p>loremloremloremlorem</p>
</div>
<div class="news news3 wrap-b2-txt">
    <h6>lorem</h6>
    <p>loremloremloremlorem</p>
</div>
$(window).scroll(function(){
    if ($(window).scrollTop() > 900) {
        $('.news1').addClass('active');
    }
    if ($(window).scrollTop() > 1000) {
        $('.news3').addClass('active');
    }
    if ($(window).scrollTop() > 1100) {
        $('.news3').addClass('active');
    }
)};
Answer 1

Как пример:

$(window).scroll(function(){ 
  ($(window).scrollTop() > 500 && $(window).scrollTop() < 900)? 
    $('.some-block').addClass('some-class'): 
  $('.some-block').removeClass('some-class'); 
});
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0} 
/*стили выше добавлены только для этого примера, в реальном проекте не использовать*/ 
html, body, .wrapper-scroll-field, .some-block{ 
  width:100% 
} 
 
.wrapper-scroll-field{ 
  position:relative; 
  height:2000px; 
} 
 
.some-block{ 
  position:absolute; 
  top:50%; 
  -webkit-transform:translatey(-50%); 
      -ms-transform:translatey(-50%); 
          transform:translatey(-50%); 
  height:100px; 
  background:red; 
} 
 
.some-class{ 
  background:blue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper-scroll-field">Scroll Down 
  <div class="some-block"></div> 
</div>

READ ALSO
Литература по WEB-программированию [закрыт]

Литература по WEB-программированию [закрыт]

Образование не из IT сферыРешил учится самостоятельно

104
В какой класс помещать конструктор SQLite?

В какой класс помещать конструктор SQLite?

Задача - подключить SQLite к проектуИмеется Конструктор

111
import csv to mysql/sqlite

import csv to mysql/sqlite

Существует некий csv файл

154
MySQL выбор синонимов иностранного слова

MySQL выбор синонимов иностранного слова

Имеется база словаря (англо-малайский): http://sqlfiddlecom/#!9/716dc2/1

146