1

Спрашиваю потому, что не нашел нигде нормального рабочего примера.. Пусть есть блок в середине и в конце страницы, В нем есть data-active="off", когда докрутишь до блока data-active должен переключить ON вместе OFF. Или как то проще можно сделать?

Вот так не работает

$('.js-monitor-scroll').each(function(){
   var thisY = js-monitor-scroll.offset().top;

    if (thisY <= (windowHeight * 0.85)) {
       $('.js-monitor-scroll').attr('data-active', 'on');

    }
    else {
        $('.js-monitor-scroll').attr('data-active', 'off');
    }
});

HTML код

<br>`
<br>
<br>
<section class="js-monitor-scroll" data-active="off"></section>
<br>
<br>
<br>
<section class="js-monitor-scroll" data-active="off"></section>

1 ответ 1

1

var item1 = $('.item1').offset().top;
var item2 = $('.item2').offset().top;
$(document).scroll(function() {
  var x = $(window).scrollTop() + $(window).height();

  if ((item1 + 100) <= x) {
    $('.item1').attr('data-active', 'on');
    $('.item1').addClass('color');
    $('.item1').text($('.item1').attr('data-active'))
  } else {
    $('.item1').attr('data-active', 'off');
    $('.item1').removeClass('color');
    $('.item1').text($('.item1').attr('data-active'))
  }
  if ((item2 + 100) <= x) {
    $('.item2').attr('data-active', 'on');
    $('.item2').addClass('color');
    $('.item2').text($('.item2').attr('data-active'))
  } else {
    $('.item2').attr('data-active', 'off');
    $('.item2').removeClass('color');
    $('.item2').text($('.item2').attr('data-active'))
  }
});
div {
  height: 1000px;
}
.color {
  color: red;
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <br>
  <br>
  <br>
</div>
<section class="js-monitor-scroll item1" data-active="off"></section>
<div>
  <br>
  <br>
  <br>
</div>
<section class="js-monitor-scroll item2" data-active="off"></section>
<div>
  <br>
  <br>
  <br>
</div>

Ваш ответ

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

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