37

Possible Duplicate:
How to detect page scroll to a certain point in jQuery?
Check if element is visible after scrolling

How can I detect when the user has reached this div:

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="theTarget">I have been reached</div>

EDIT

Got the answer from this question:

Check if element is visible after scrolling

So I just did this:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function() {    
    if(isScrolledIntoView($('#theTarget')))
    {
        alert('visible');
    }    
});
Community
  • 1
  • 1
Mike
  • 381
  • 1
  • 3
  • 4
  • possible duplicate of [How to detect page scroll to a certain point in jQuery?](http://stackoverflow.com/questions/5036850/how-to-detect-page-scroll-to-a-certain-point-in-jquery) and [Trigger events when the window is scrolled to certain positions](http://stackoverflow.com/questions/5672320/trigger-events-when-the-window-is-scrolled-to-certain-positions). – Felix Kling Aug 24 '11 at 21:16
  • Have a look at this question - http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling – ipr101 Aug 24 '11 at 21:16
  • @ipr101 yeah that accepted answer does it. – Mike Aug 24 '11 at 21:32

3 Answers3

61

Compare the page scroll position to your element top position, than call your function.

jQuery

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $('#theTarget').position().top) {
    console.log('I have been reached');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="theTarget">I have been reached</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

ES6 (Pure JS, no jQuery)

var target = document.querySelector('#theTarget');

document.addEventListener('scroll', () => {
  if (window.scrollY >= target.getBoundingClientRect().top) {
    console.log('I have been reached');
  }
})
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="theTarget">I have been reached</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
  • This looks simpler than the solution I got from the other question so it would be better but I can't get it to work. For YourActionHere() I used a simple alert but they alert doesn't come up when I scroll to the target element. – Mike Aug 24 '11 at 21:36
  • 1
    In my example, I'm scrolling the entire document, is it your case? Maybe you're scrolling a part of the document, for example a Div. In this case, you need to replace $(document) by $(yourDiv). – Simon Arnold Aug 24 '11 at 21:59
  • 1
    I guess you would need to debounce the event since it fires like a gazillion times every second. – imrek Jul 11 '15 at 19:45
  • 2
    @DrunkenMaster you're right. A debounce would greatly help the performance. – Simon Arnold Jul 13 '15 at 12:33
5

I think you can accomplish your goal by comparing values from your div position

var divPosition = $("#theTarget").offset().top;

and the window scroll position

var scrollPosition = window.scrollY;
Maxx
  • 3,925
  • 8
  • 33
  • 38
4

There is a jquery appear plugin that I believe does exactly what you are asking.

http://plugins.jquery.com/project/appear

$('#theTarget').appear(function() {
  $(this).text('Hello world');
});

It also ties into resize, and initial window size ... etc, etc, etc.

Wayne
  • 4,760
  • 1
  • 24
  • 24