How would I have a DIV stay at the top of the page visually as the user scrolls down a web page?
A simple Javascript framework would be great!
it's for this web site: http://BiblePro.BibleOcean.com
+11
A:
If you don't care about IE6, you can use position: fixed:
div {
top: 0;
position: fixed
}
Using jQuery, see this question: What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
Kobi
2009-10-10 18:40:28
As a note, `top: 0;` sets the distance from the top of the window to the top of the div to 0 (since px or em isn't noted, the browser doesn't care). It's obvious, but good to know how exactly it works.
Isaac Hodes
2009-10-10 18:43:44
@Isaac Copper - I belive a unit isn't needed for `0` - should that be changed, or am I ok?
Kobi
2009-10-10 18:45:20
@Kobi: There's no need to specify units for `0`.
RichieHindle
2009-10-10 18:46:36
Please stop using jQuery for every little thing!!
AntonioCS
2009-11-26 23:54:09
+1
A:
Here you go: http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/
Ineterestingly, I have the same question, but I'm looking to re-create the Apple Store shopping cart sidebar. It works similarly, except that it swaps the CSS class of the div when a certain scroll position is reached, so it goes from absolute to fixed. Anyone know where I can find this, I've looked everywhere for a tutorial replicating the effect.
Brian
2009-10-10 18:43:04
They are using CSS to set the cart to be absolute to the top of that column, and since the banner over the column (the "header") is fixed height, they have javascript that says to make the entire column fixed if the window top is a specific point in the document height. If you peruse the code, you'll notice they use something called coherent to make it work.
Anthony
2009-10-10 19:00:38