В разметке есть три блока, которые при скролле должны меняться. Т.е. на определенной высоте к 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');
}
)};
Как пример:
$(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>
Фрилансер или Digital-агентство - Как сделать правильный выбор?
Образование не из IT сферыРешил учится самостоятельно
Задача - подключить SQLite к проектуИмеется Конструктор
Имеется база словаря (англо-малайский): http://sqlfiddlecom/#!9/716dc2/1