Trigger event when user scroll to specific element – with jQuery

by

You can calculate the offset of the element and then compare that with the scroll value like:

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
       console.log('H1 on the view!');
   }
});

Check this Demo Fiddle

Updated Demo Fiddle no alert — instead FadeIn() the element

Updated code to check if the element is inside the viewport or not. Thus this works whether you are scrolling up or down adding some rules to the if statement:

   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       //Do something
   }

Demo Fiddle

More Related Contents:

  1. Scroll Function working in reverse order [closed]
  2. Scroll Automatically to the Bottom of the Page
  3. How to scroll an HTML page to a given anchor
  4. Keep overflow div scrolled to bottom unless user scrolls up
  5. How to scroll to top of page with JavaScript/jQuery?
  6. prevent Scroll bubbling from element to window
  7. How to do a horizontal scroll on mouse wheel scroll?
  8. How to load images dynamically (or lazily) when users scrolls them into view
  9. How to scroll the window using JQuery $.scrollTo() function
  10. javascript: detect scroll end
  11. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  12. Scrolling Overflowed DIVs with JavaScript
  13. Smooth scrolling when clicking an anchor link
  14. How can I get all a form’s values that would be submitted without submitting [duplicate]
  15. Changing “src” attribute of
  16. How can I make an image carousel with only CSS?
  17. Specifying the value output of of an HTML5 input type = date?
  18. jQuery form submit() is not working in IE6?
  19. How to call a function after a div is ready?
  20. How to convert selected HTML to Json?
  21. Does jQuery internally convert HTML5 data attribute keys to lowercase?
  22. Why isn’t my checkbox change event triggered?
  23. Remove DIV tag using Javascript or Jquery
  24. How to customize the position of an alert box
  25. How to execute code in a javascript append
  26. jquery ajax parse response text
  27. Showing Placeholder text for password field in IE
  28. Why I cant use jQuery functionality
  29. Horizontal scrolling with mouse wheel in a div
  30. In jQuery mobile, what’s the diff between tap and vclick?

Leave a Comment