How to detect when the user has scrolled to a certain area on the page using jQuery? [duplicate]

Answer 1

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;

Answer 2

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.

Answer 3

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>