javascript - How to always make page content appear beneath navigation bar? - Stack Overflow

admin管理员组

文章数量:1394131

I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:

.html#calendar

You can scroll down or up in the content, but the navigation bar never goes away.

For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.

Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
}

#navigation li
{
    display: inline-block; 
    width: 150px;
    height: 110px;
    cursor: pointer;
}

And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:

#container
{
    position: absolute;
    margin-top: 180px;
    font-size: 25px;
    width: 90%;
}

I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:

http://www.google./intl/en/enterprise/apps/business/products.html#calendar

You can scroll down or up in the content, but the navigation bar never goes away.

For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.

Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
}

#navigation li
{
    display: inline-block; 
    width: 150px;
    height: 110px;
    cursor: pointer;
}

And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:

#container
{
    position: absolute;
    margin-top: 180px;
    font-size: 25px;
    width: 90%;
}

• javascript
• html
• css
• layout
• positioning

Share Improve this question Follow asked Jan 18, 2013 at 18:27 AliAli 267k269269 gold badges592592 silver badges786786 bronze badges 1

• 1 dropthebit./demos/stickyfloat/stickyfloat.html – Win Commented Jan 18, 2013 at 18:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The reason it's going through is because you didn't set a background color to your navigation bar. Try that.

Edit: Looked at your source code. Replace navigation CSS in style.css file with this:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
    background-color: #FFFFFF;
    z-index:999;
}

The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.

You can use the property z-index:xxx, did you try that?

Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.

Have you tried to add data-role="header" ?

<div data-role="header" data-position="fixed">

本文标签： javascriptHow to always make page content appear beneath navigation barStack Overflow