Событие на scroll

252

26 апреля 2017, 12:16

Как сделать событие, которое запускается когда scroll достигает самого верха в блоке?

Answer 1

$(function() { 
  var block = $('.block') 
    , console = $('.console'); 
  $(window).scroll(function(e) { 
    var offset = $(window).scrollTop() - block.offset().top; 
    if (offset < 0) { 
      console.text('Выше блока'); 
    } 
    else if (offset > 0) { 
      console.text('Ниже блока'); 
    } 
    else { 
      console.text('На блоке'); 
    } 
  }); 
});

.container { 
  height: 1000px; 
} 
 
div { 
  border: 1px solid; 
  margin: 16px; 
  padding: 16px; 
} 
 
.block { 
  height: 64px; 
  margin-top: 48px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="block">Block</div> 
  <span class="console"></span> 
</div>

Answer 2

Я конечно не эксперт, но бытует в народе мнение, что лучше юзать таймер вместо обычного события скроллинга http://joshbroton.com/hooking-up-to-the-window-onscroll-event-without-killing-your-performance/