What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?

by

Using this HTML:

<div id="myElement" style="position: absolute">This stays at the top</div>

This is the javascript you want to use. It attaches an event to the window’s scroll and moves the element down as far as you’ve scrolled.

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

As pointed out in the comments below, it’s not recommended to attach events to the scroll event – as the user scrolls, it fires A LOT, and can cause performance issues. Consider using it with Ben Alman’s debounce/throttle plugin to reduce overhead.

More Related Contents:

  1. Stopping fixed position scrolling at a certain point?
  2. Add Content to webpage using only CSS
  3. Why is my jQuery :not() selector not working in CSS?
  4. iframe to Only Show a Certain Part of the Page
  5. $(window).width() not the same as media query
  6. Get element -moz-transform:rotate value in jQuery
  7. Play/pause HTML 5 video using JQuery
  8. jQuery or CSS selector to select all IDs that start with some string [duplicate]
  9. How to automatically change the text size inside a div?
  10. Find text string in jQuery and make it bold
  11. Can I change the scroll speed using css or jQuery?
  12. jquery IE Fadein and Fadeout Opacity
  13. Activate CSS3 animation when the content scrolls into view
  14. jQuery toggle CSS?
  15. jQuery CSS – Write into the -tag
  16. jQuery: height()/width() and “display:none”
  17. How to find the highest z-index using jQuery
  18. Selecting only first-level elements in jquery
  19. How to make Bootstrap carousel slider use mobile left/right swipe
  20. How can I tell if a particular CSS property is inherited with jQuery?
  21. Creating a hole in a element
  22. Can an iframe only show a certain part of the page?
  23. Apply CSS to jQuery Dialog Buttons
  24. CSS issue on Twitter Typeahead with Bootstrap 3
  25. How to keep footer at the bottom even with dynamic height website
  26. Use jQuery to Detect Container Overflow?
  27. Weird IE8 layout glitch – why does the body background disappear?
  28. jQuery css gradient
  29. Remove vertical lines in jqGrid
  30. Removing multiple classes (jQuery)

Leave a Comment