30

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

Ian Vink
  • 66,960
  • 104
  • 341
  • 555
  • 5
    go with Kobi's answer. A javascript framework would be like swatting a mosquito with a machine gun. CSS is the right way to go. – Anthony Oct 10 '09 at 18:43
  • I checked out your website mentioned in your question and I really like it, you did a great job with it. – amaster Aug 01 '13 at 17:24
  • 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 Oct 10 '09 at 18:43
  • 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 Oct 10 '09 at 19:00

2 Answers2

49

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?

Community
  • 1
  • 1
Kobi
  • 135,331
  • 41
  • 252
  • 292
  • 1
    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 Oct 10 '09 at 18:43
  • @Isaac Copper - I belive a unit isn't needed for `0` - should that be changed, or am I ok? – Kobi Oct 10 '09 at 18:45
  • 4
    Please stop using jQuery for every little thing!! – AntonioCS Nov 26 '09 at 23:54
  • 4
    No one cares about I.E ... We only care about the glorious day that it will die and be gone forever :) I tell all my clients NOT to use I.E. –  Aug 15 '13 at 05:53
  • Thanks! But if your div is inside a td, I would add a width attribute to it. – Anonymous Pi Mar 16 '14 at 19:43
  • @KDawg I'm trying to make an app using VB.NET. I was so dissapointed when I learned it's webbrowser element was IE (But not IE6, so the code worked!) – Anonymous Pi Mar 16 '14 at 19:45
  • Simple and does the job. However, on mobile it doesn't work perfectly (The div doesn't display fully). Does it for you? – Nour Lababidi Sep 04 '17 at 19:52
3

That is simple, just make the top Div position and it will work fixed e.g

Start div tag

<div style="position: fixed;background: #336699; width: 100%;">

Be at the top end div tag

Misa Lazovic
  • 2,805
  • 10
  • 32
  • 38
Amriz khan
  • 41
  • 1