How to detect page scroll to a certain point in jQuery?

by

How about:

var target = $(".myPara").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= target) {
        alert("made it!");
        clearInterval(interval);
    }
}, 250);

Here’s an example: http://jsfiddle.net/andrewwhitaker/24M3n/1/

You might be tempted to attach an event handler to the window scroll event, but John Resig advises against it (Scroll down to “Best Practices”).

Update: As @AbdulJabbarWebBestow points out, it might be a bad idea to unnecessarily run a function every 250ms. Here’s an updated example that only runs once, 250ms after the first time a user scrolls:

var target = $(".mypara").offset().top,
    timeout = null;

$(window).scroll(function () {
    if (!timeout) {
        timeout = setTimeout(function () {
            console.log('scroll');            
            clearTimeout(timeout);
            timeout = null;
            if ($(window).scrollTop() >= target) {
                alert('made it');
            }
        }, 250);
    }
});

Example: http://jsfiddle.net/24M3n/858/

More Related Contents:

  1. How to select all images using jquery and give them an width?
  2. jQuery – What are differences between $(document).ready and $(window).load?
  3. How can I find elements by text content with jQuery?
  4. Calculating text width
  5. iframe to Only Show a Certain Part of the Page
  6. Pass array to ajax request in $.ajax() [duplicate]
  7. Animate element transform rotate
  8. How to set data attributes in HTML elements
  9. jQuery easing functions without using a plugin
  10. How do I get the height of a div’s full content with jQuery?
  11. Check if username exists in database with AJAX
  12. Use Bootstrap 3 dropdown menu as context menu
  13. Select link by text (exact match)
  14. append /remove anchor name from current url without refresh
  15. How can I change HTML attribute names with jQuery?
  16. A cleaner way to select by multiple possible attribute values?
  17. jquery can’t get data attribute value
  18. How add spaces between Slick carousel item
  19. jQuery web page height
  20. Simple jQuery Ajax call leaks memory in Internet Explorer
  21. JQuery change not firing until blur
  22. jQuery dataTable doesn’t show sort icon
  23. JQuery .load() callback function
  24. Backbone.js Event Binding
  25. Unselect what was selected in an input with .select()
  26. Working with single page websites and maintaining state using a URL hash and jQuery
  27. Sending array data with jquery and flask
  28. jQuery Deferred – getting result of chained ajax calls
  29. How to make synchronous JSONP crossdomain call
  30. jquery get only all html elements with ids

Leave a Comment