Geek Answers Handbook

Page Scrolling by Position: Fixed Content

I have a top navigation area with position: fixed

I want the contents of the page to scroll normally, but not disappear under the navigation. The main problem is when I perform a search (this is a complete CMS with hundreds of results in different modules), what I am looking for sometimes scrolls under the navigation. I am fine because I know what is happening, but I would like it to work well for my users. I suppose I could use a frameset, but is there any other way?

I basically have what you typed, except that I have a div for content with margin-top: 50px. The problem is that the content of the div scrolls with the page, so I have 50px of hidden content as soon as the page starts to scroll. This is especially noticeable if I perform a search in the browser (Ctrl-F). I solved the printing problem with the @print stylesheet by deleting the navigation area, but I would like the scroll to happen only under the navigation.

I was thinking about trying:

body {
overflow: no-scroll; (or whatever the css is for this)
}

#content {
overflow: scroll;
}

This can get rid of the browser scrollbar and have only one content area. Not sure how it will look. Even less ideal. It will probably look just like a set of frames without annoying frames.

+2
1

,

body {
  position: relative;
  top: <whatever height your navigation bar is>;
}


#nav {
  position: fixed;
}

, body , ​​ , position: fixed position: absolute.

0

More articles:


All Articles