[css] How can I make content appear beneath a fixed DIV element?

My intention is to create a menu at the top of the page which remains at the top of the page even when the user scrolls (like Gmail's recent feature which has the commonly-used buttons scrolling down with the user so that it allows them to perform operations on messages without having to scroll to the top of the page).

I would also like to set the content below said menu to appear below it - at present, it appears behind it.

I am aiming for something like this:

+________________________+
|          MENU          | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
|     CONTENT BEGINS     |
|          HERE          |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+   <--- Bottom of page.

I hope to have the menu at the top which never moves and which stays at the top of the page, even when the user scrolls down. I am also looking to have the main content begin beneath the menu when the user is at the top of the page, but when the user scrolls down, then it doesn't matter if the menu goes over the top of the content.

Summary:

• I wish to have a fixed position menu at the top of the page which follows the user when scrolling.
• Content must appear BELOW the menu ONLY when the user is at the top of the page.
  • When the user scrolls down, the menu may overlap the content.

Can somebody please explain how to achieve this?

Thank you.

UPDATE:

CSS Code:

#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}

HTML Code:

<div id="floatingMenu">
    <a href="http://www.google.com">Test 1</a>
    <a href="http://www.google.com">Test 2</a>
    <a href="http://www.google.com">Test 3</a>
</div>  

At present, I can get the menu to appear at the top of the page and centered by placing it inside my container div. However, the content goes behind the menu. I have set clear: both; and this has not helped.

Wrap the menu contents with another div:

<div id="floatingMenu">
    <div>
        <a href="http://www.google.com">Test 1</a>
        <a href="http://www.google.com">Test 2</a>
        <a href="http://www.google.com">Test 3</a>
    </div>
</div>

And the CSS:

#floatingMenu {
    clear: both;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: #78AB46;
    top: 5px;
}

#floatingMenu > div {
    margin: auto;
    text-align: center;
}

And about your page below the menu, you can give it a padding-top as well:

#content {
    padding-top: 35px; /* top 5px plus height 30px */
}

To those suggesting the use of margin-top or padding-top to move the main division below the fixed menu - you don't seem to be testing it completely.

If you set a margin or padding, it will scroll with the page and you will lose lines - go try this page

Looks good, does it not? Highlight a word on the bottom visible line and press page-down - the line with the highlighted word, and a few other lines, will be scrolled under the fixed division.

Margin-top or padding-top WILL position the main division below the fixed division but it all falls flat on its face when you page-down or click the scroll bar to scroll one viewport height of the page.

Same problem if you page-up, lines "fall off" the bottom of the view-port.

Does anyone have an actual fix for THIS problem?

I know how to position things - that's fairly easy if you know the basics about margins, padding, etc. - but how do you prevent the loss of lines when scrolling?

I've looked at a lot of examples of what are claimed to be a properly functioning pages with fixed divisions at the top, but they don't work! They all have problems which scrolling.

I have come across some pages appear to work but if the fixed division is made higher, lines will be lost. I believe I know why they appear to work.

Think in terms of how text on a totally normal (no fancy formatting) page scrolls. Do you see the bottom line when you scroll up or do you see the next line - the bottom one having scrolled off the top of the viewport?

Answer - you see the bottom line scrolled to become the top line.

The fixed menu pages that seem to work really don't. Scroll them and the bottom line is scrolled off the viewport but since the next line is visible, it appears that the fixed division works - but we know better, don't we?

If the fixed division gets higher than the height of one line of text, they fail and lines are lost.

The only pages that I've seen that actually work properly are on sites such as yahoo and I don't have the time, nor inclination, to dig down into what is a lot of CSS, HTML, and JavaScript on the pages to get to the heart of the matter.

So - go to that page and see if you can make changes ("inspect" the elements and make changes to the CSS rules) that fix the scrolling problems.

If you can, come back and share your discovery with world.

My page is a good place to look at what it takes to be able to fix a division at the top, center it (and the main division) and restrict it to a max-width. It may help some of you but I'm sorry I don't have a fix for the scrolling problem

Play with the height of the fix division - make it short enough so that only one line shows and then play with the scrolling. Then make it large enough for two lines and then three and play with the scrolling. You'll see the issues.

Here is a page that is supposed to work but it doesn't - read the very last comment - they describe the problem in a different way but it is the same problem

I just tested the page again in Chrome and it seems to work fairly satisfactorily. With FF the problem exists. Haven't tried IE again, yet.

So - what is different with FF?

Here's a page at cNet which works with chrome and ff - so what are they doing?

More testing with Chrome shows that it fails to fully display the bottom line when scrolled. Just part of the line that was at the bottom is visiable when your scroll - so, still need a fix.

You should try that Pen I hope that will help you and even give more better functionality to use fixed navigation

1.clear:both; you dont need to use clear

I liked grdevphl's Javascript answer best, but in my own use case, I found that using height() in the calculation still left a little overlap since it didn't take padding into account. If you run into the same issue, try outerHeight() instead to compensate for padding and border.

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').outerHeight();
    $('#content').css('margin-top',contentPlacement);
});

#nav{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    margin: 0 auto;
    z-index: 9999;
    background-color: white;
}

I just added a padding-top to the div below the nav. Hope it helps. I'm new on this. C:

#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: url(../css/patterns/black_denim.png);
    z-index: 9999;
}

#container {
    display: block;
    padding: 6em 0 3em;
}

If your menu height is variable (for responsiveness or because it's loaded dynamically), you can set the top margin to where the fixed div ends. For example:

CSS

.fixed-header {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

Javascript

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').height();
    $('#content').css('margin-top',contentPlacement);
});

HTML

...
<div id="header" class="fixed-header"></div>
<div id="content">...</div>
...

Here's a fiddle (https://jsfiddle.net/632k9xkv/5/) that goes a little beyond this with both a fixed nav menu and header in an attempt to hopefully make this a useful sample.

I just had this problem, and this was my solution:

#floatingMenu + * {
    margin-top: 35px;
}

Adjust for the height of your floatingMenu. If you don't know for sure that it's a div following then you can use * rather than div. This is all valid CSS2.

A #spacer div must be placed between the header and main body, like this:

<header>
</header>
<div id="spacer"></div>
<main>
</main>

The header's position will be fixed, while the spacer will keep its default static position:

header {position: fixed;}

Finally you need to make sure that both the header and spacer have the same size-related properties, like so:

header, #spacer {
    height: 100px;
    max-height: 35vh;
}

This works for me at least.

Having just struggled with this and disliking some of the "hackier" solutions, I found this to be useful and clean:

#floatingMenu{
  position: sticky;
  top: 0;
}

There is (at least) one wayhack to get truly dynamic height without javascript: insert the menu twice:

• Once in the flow to position the following elements, and
• once fixed for the desired visual effect.

<div id="the-menu-container">_x000D_
    <nav class="position-static">...</nav>_x000D_
    <nav class="position-fixed">...</nav>_x000D_
</div>

Depending on the rest of your site, you might have to tweak the z-index styles of the <nav> elements.

Here's a responsive way of doing it with jQuery.

 $(window).resize(function () {
      $('#YourRelativeDiv').css('margin-top', $('#YourFixedDiv').height());
 });