Have a div cling to top of screen if scrolled down past it [duplicate]

by

The trick is that you have to set it as position:fixed, but only after the user has scrolled past it.

This is done with something like this, attaching a handler to the window.scroll event

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

This simply adds a sticky CSS class when the page has scrolled past it, and removes the class when it’s back up.

And the CSS class looks like this

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

EDIT- Modified code to cache jQuery objects, faster now.

More Related Contents:

  1. Close ad to continue as free user?
  2. JS hide function error
  3. How to read with JavaScript [closed]
  4. How to implement something like this GIF that using mouse drag and select items
  5. Javascript counting all the characters from a HTML document
  6. Set cookie and get cookie with JavaScript [duplicate]
  7. Load and execution sequence of a web page?
  8. Check if an element contains a class in JavaScript?
  9. Disabling browser print options (headers, footers, margins) from page?
  10. JSFiddle code not working in my own page
  11. All About…. Z-Index?
  12. How to disable scroll without hiding it?
  13. HTML selected option background-color CSS style
  14. Why my show hide button needs double-click on first time
  15. How to dynamically create ‘@-Keyframe’ CSS animations?
  16. Infinity Loop Slider Concepts
  17. Make anchor link go some pixels above where it’s linked to
  18. Where should I put the CSS and Javascript code in an HTML webpage?
  19. How to print HTML content on click of a button, but not the page? [duplicate]
  20. jQuery Validation using the class instead of the name value
  21. Dark mode flickers a white background for a millisecond on reload
  22. How to create checkbox inside dropdown?
  23. How to trigger CSS “hover state” using Javascript? [duplicate]
  24. Javascript-Setting background image of a DIV via a function and function parameter
  25. Gaussian Blur onHover Using jQuery
  26. Is it possible to make input fields read-only through CSS?
  27. Detect if dropdown navigation would go off screen and reposition it
  28. Iframe inherit from parent
  29. Freeze Header until Irrelevant (HTML, CSS and JS)
  30. Bootstrap Dropdown menu is not working

Leave a Comment