I ask because I have not found a normal working example anywhere. Suppose there is a block in the middle and at the end of the page. It has data-active = "off" when you have to switch to the data-active block should switch ON together OFF. Or how can it be made easier?

That's not how it works

$('.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 code

 <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 answer 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>