How to make div follow scrolling smoothly with jQuery?

by

Since this question is getting a lot of views and the tutorial linked in the most voted answer appears to be offline, I took the time to clean up this script.

See it live here: JSFiddle

JavaScript:

(function($) {
    var element = $('.follow-scroll'),
        originalY = element.offset().top;

    // Space between element and top of screen (when scrolling)
    var topMargin = 20;

    // Should probably be set in CSS; but here just for emphasis
    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();

        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);

More Related Contents:

  1. How to programmatically disable page scrolling with jQuery
  2. Scroll to a div using jQuery
  3. How can I scroll to a specific location on the page using jquery?
  4. jQuery Scroll to bottom of page/iframe
  5. How to detect scroll direction
  6. Can I change the scroll speed using css or jQuery?
  7. jQuery scroll to ID from different page
  8. Activate CSS3 animation when the content scrolls into view
  9. Detect middle button click (scroll button) with jQuery
  10. More efficient way to handle $(window).scroll functions in jquery?
  11. jquery change background color user scroll
  12. Animate scroll to ID on page load
  13. Show Div when scroll position
  14. How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
  15. jQuery disable scroll when mouse over an absolute div
  16. Differentiate between scroll up/down in jquery? [duplicate]
  17. How do I get the height of a div’s full content with jQuery?
  18. jquery – keep window from changing scroll position while prepending items to a list?
  19. Disable scrolling when changing focus form elements ipad web app
  20. jQuery trigger when 2/3s of div are in viewport
  21. How to detect horizontal scrolling in jQuery?
  22. jQuery animate scroll
  23. scroll up and down a div on button click using jquery
  24. Use jQuery to check mousewheel event without scrollbar
  25. jQuery: detecting reaching bottom of scroll doesn’t work, only detects the top
  26. Detect user scroll down or scroll up in jQuery [duplicate]
  27. Jquery .on(‘scroll’) not firing the event while scrolling
  28. jQuery on window resize
  29. grouping draggable objects with jquery-ui draggable
  30. How can I check if a jQuery plugin is loaded?

Leave a Comment