0

I haven't started building the site yet, but wanted to know how to keep a navigation at the top of a long vertical page where when I scroll down (or click a link and it scrolls for me) the navigation floats over everything it scrolls and stays in place instead of it disappearing when the scrolling goes down.

colasus
  • 53
  • 1
  • 5
  • 7
    CSS: `position: fixed`. – VisioN Jun 25 '13 at 13:06
  • A bit about fixed positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning ("This is often used to create a floating element that stays in the same position even after scrolling the page.") – apsillers Jun 25 '13 at 13:07

3 Answers3

1
position:fixed;

Just adding it as an answer ;-)

Nick R
  • 7,704
  • 2
  • 22
  • 32
0

Say your navigation div had an id of 'navigation':

#navigation{

    position:fixed;

}
shennan
  • 10,798
  • 5
  • 44
  • 79
0

position:fixed; is good, however you will need to be aware that this takes the element out of the flow of the DOM - essentially making the element "not there" as far as all the other elements on the page are concerned. The upshot? Well unless you are careful with how you build your page, the rest of the elements on the page could shift around and it could break your layout. Best to build the page with this in mind rather than retrofitting the detail :)

Doug
  • 823
  • 2
  • 10
  • 20
  • ... and also it doesn't work in IE6... – VisioN Jun 25 '13 at 13:14
  • @VisioN oh now, that lousy 'I don't want free updates' >1% of all the internet users – Pinoniq Jun 25 '13 at 13:17
  • @Pinoniq Bullshit. That's over 50% ;) – VisioN Jun 25 '13 at 13:18
  • @Pinoniq Some website visitors may not have control over what browser is installed on their machine and may not be able to upgrade from IE 6 to a newer browser. – Joe W Jun 25 '13 at 13:19
  • @JoeW lol, http://www.w3schools.com/browsers/browsers_explorer.asp 0,1% so you can drop support. Just like youtube and twitter did – Pinoniq Jun 25 '13 at 13:51
  • @Pinoniq you should never base browser support based on global numbers from one source. What matters from a development side is what browser versions are being used on your website. If you had a large user base still using IE 6 then it would be a bad move to drop all support for it just because not many people overall use the browser. – Joe W Jun 25 '13 at 14:11
  • @JoeW I think its bad practice to support software that is insecure, doesn't get updated etc etc. You then also miss out on all the good stuff that we can do these days. Ow, and even microsoft dropped all support for IE 6 ;) nuf said. Don't use or support bad software – Pinoniq Jun 25 '13 at 22:33
  • @Pinoniq You may think that until you find that your website loses a lot of traffic due to not supporting an older browser or that you are in violation of a contract due to lack of support. There are still plenty of places that use IE 6 such as different government agency's around the world. – Joe W Jun 26 '13 at 12:18