What is the simplest jQuery way to have a position fixed always at top div

Question

I m relatively new to jQuery  but so far what I ve seen I like  What I want is for a div  or any element  to be across the top of the page as if  position  fixed  worked in every browser   I do not want something complicated  I do not want giant CSS hacks  I would prefer if just using jQuery  version 1 2 6  is good enough  but if I need jQuery-UI-core  then that s fine too   I ve tried     topBar   scrollFollow     lt -- but that goes slow    I want something to appear really fixed

User · Answer

For those browsers that do support  position  fixed  you can simply use javascript  jQuery  to change the position to  fixed  when scrolling  This eliminates the jumpiness when scrolling with the   window  scroll function    solutions listed here   Ben Nadel demonstrates this in his tutorial  Creating A Sometimes-Fixed-Position Element With jQuery

User · Answer

Beautiful  Your solution was 99     instead of  this scrollY   I used    window  scrollTop     What s even better is that this solution only requires the jQuery1 2 6 library  no additional libraries needed    The reason I wanted that version in particular is because that s what ships with MVC currently   Here s the code     document  ready function             topBar   css  position    absolute           window  scroll function             topBar   css  top     window  scrollTop      px

User · Answer

Using this HTML    lt div id  myElement  style  position  absolute  gt This stays at the top lt  div gt    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

User · Answer

Beautiful  Your solution was 99     instead of  this scrollY   I used    window  scrollTop     What s even better is that this solution only requires the jQuery1 2 6 library  no additional libraries needed    The reason I wanted that version in particular is because that s what ships with MVC currently   Here s the code     document  ready function             topBar   css  position    absolute           window  scroll function             topBar   css  top     window  scrollTop      px

User · Answer

For anyone still looking for an easy solution in IE 6   I created a plugin that handles the IE 6 position  fixed problem and is very easy to use  http   www fixedie com   I wrote it in an attempt to mimic the simplicity of belatedpng  where the only changes necessary are adding the script and invoking it

User · Answer

Beautiful  Your solution was 99     instead of  this scrollY   I used    window  scrollTop     What s even better is that this solution only requires the jQuery1 2 6 library  no additional libraries needed    The reason I wanted that version in particular is because that s what ships with MVC currently   Here s the code     document  ready function             topBar   css  position    absolute           window  scroll function             topBar   css  top     window  scrollTop      px

User · Answer

Using this HTML    lt div id  myElement  style  position  absolute  gt This stays at the top lt  div gt    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

User · Answer

In a project  my client would like a floating box in another div  so I use margin-top CSS property rather than top in order to my floating box stay in its parent

User · Answer

HTML CSS Approach  If you are looking for an option that does not require much JavaScript  and and all the problems that come with it  such as rapid scroll event calls   it is possible to gain the same behavior by adding a wrapper  lt div gt  and a couple of styles  I noticed much smoother scrolling  no elements lagging behind  when I used the following approach   JS Fiddle  HTML   lt div id  wrapper  gt     lt div id  fixed  gt       Fixed Content     lt  div gt  lt  --  fixed -- gt     lt div id  scroller  gt       Scrolling Content     lt  div gt  lt  --  scroller -- gt   lt  div gt  lt  --  wrapper -- gt    CSS   wrapper   position  relative     fixed   position  fixed  top  0  right  0     scroller   height  100px  overflow  auto      JS    Compensate for the scrollbar  otherwise  fixed will be positioned over it     function         Determine the difference in widths between     the wrapper and the scroller  This value is     the width of the scroll bar  if any     var offset       wrapper   width   -     scroller   get 0  clientWidth       Set the right offset       fixed   css  right   offset    px           Of course  this approach could be modified for scrolling regions that gain lose content during runtime  which would result in addition removal of scrollbars

User · Answer

HTML CSS Approach  If you are looking for an option that does not require much JavaScript  and and all the problems that come with it  such as rapid scroll event calls   it is possible to gain the same behavior by adding a wrapper  lt div gt  and a couple of styles  I noticed much smoother scrolling  no elements lagging behind  when I used the following approach   JS Fiddle  HTML   lt div id  wrapper  gt     lt div id  fixed  gt       Fixed Content     lt  div gt  lt  --  fixed -- gt     lt div id  scroller  gt       Scrolling Content     lt  div gt  lt  --  scroller -- gt   lt  div gt  lt  --  wrapper -- gt    CSS   wrapper   position  relative     fixed   position  fixed  top  0  right  0     scroller   height  100px  overflow  auto      JS    Compensate for the scrollbar  otherwise  fixed will be positioned over it     function         Determine the difference in widths between     the wrapper and the scroller  This value is     the width of the scroll bar  if any     var offset       wrapper   width   -     scroller   get 0  clientWidth       Set the right offset       fixed   css  right   offset    px           Of course  this approach could be modified for scrolling regions that gain lose content during runtime  which would result in addition removal of scrollbars

User · Answer

Beautiful  Your solution was 99     instead of  this scrollY   I used    window  scrollTop     What s even better is that this solution only requires the jQuery1 2 6 library  no additional libraries needed    The reason I wanted that version in particular is because that s what ships with MVC currently   Here s the code     document  ready function             topBar   css  position    absolute           window  scroll function             topBar   css  top     window  scrollTop      px

User · Answer

In a project  my client would like a floating box in another div  so I use margin-top CSS property rather than top in order to my floating box stay in its parent

User · Answer

For those browsers that do support  position  fixed  you can simply use javascript  jQuery  to change the position to  fixed  when scrolling  This eliminates the jumpiness when scrolling with the   window  scroll function    solutions listed here   Ben Nadel demonstrates this in his tutorial  Creating A Sometimes-Fixed-Position Element With jQuery

User · Answer

Using this HTML    lt div id  myElement  style  position  absolute  gt This stays at the top lt  div gt    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

User · Answer

Using this HTML    lt div id  myElement  style  position  absolute  gt This stays at the top lt  div gt    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

User · Answer

For anyone still looking for an easy solution in IE 6   I created a plugin that handles the IE 6 position  fixed problem and is very easy to use  http   www fixedie com   I wrote it in an attempt to mimic the simplicity of belatedpng  where the only changes necessary are adding the script and invoking it

[jquery] What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

Examples related to jquery

Examples related to css

Examples related to positioning