How can I make a div stick to the top of the screen once it’s been scrolled to?

by

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.

More Related Contents:

  1. Scroll Function working in reverse order [closed]
  2. Prevent BODY from scrolling when a modal is opened
  3. Keep overflow div scrolled to bottom unless user scrolls up
  4. Make scrollbar visible in mobile browsers
  5. Stop fixed position at footer
  6. Synchronized scrolling using jQuery?
  7. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  8. Reverse Scrolling
  9. jQuery position DIV fixed at top on scroll
  10. required field notification using jquery
  11. CSS or jQuery : How to get visible top [duplicate]
  12. Write tags in HTML and print
  13. jQuery: Get height of hidden element in jQuery
  14. horizontal scrollbar on top and bottom of table
  15. Event when user stops scrolling
  16. Trigger event when user scroll to specific element – with jQuery
  17. Show and hide divs at a specific time interval using jQuery
  18. How do I detect “shift+enter” and generate a new line in Textarea?
  19. event.wheelDelta returns undefined
  20. Get a CSS value from external style sheet with Javascript/jQuery
  21. How to do a horizontal scroll on mouse wheel scroll?
  22. How to load images dynamically (or lazily) when users scrolls them into view
  23. :touch CSS pseudo-class or something similar?
  24. Toggle visibility property of div
  25. Check if element is between 30% and 60% of the viewport
  26. Add a transform value to the current transforms that are already on the element?
  27. ScrollTo function in AngularJS
  28. How do I detect the inherited background-color of an element using jQuery/JS?
  29. Why is element not being shown before alert?
  30. Detect if dropdown navigation would go off screen and reposition it

Leave a Comment