Is there a way to execute a function only when a div is on the user's screen?
Example, I have a div that is in the middle of the site and when a user scrolls to it, or reaches it, I want a function to be executed.
Is there any way to do this with AngularJS or Jquery?
The example below has the div #box hidden with opacity:0 , when the scroll comes in the middle of the div #box change the opacity to 1;
var executou = false;
$(document).scroll(function() {
if (!executou && $(window).scrollTop() > $('#box').offset().top/2) {
$('#box').css('opacity','1');
executou = true;
}
});#base{
min-height:600px
}
#box{
transition:1s;
min-height:300px;
margin-top:100%;
background:red;
opacity:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><divid="base">
<div id="box">
</div>
</div>This response from SOen is for you:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});
-100 is the value relative to height that will trigger the event.