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

Question

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.

Answer 1

What you need is an extra spacing div (as far as I understood your question).

This div will be placed between the menu and content and be the same height as the menu div, paddings included.

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
    &nbsp;
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

See my example here.

This works by offsetting the space that would have been occupied by the nav div, but as it has position: fixed; it has been taken out of the document flow.

---

The preferred method of achieving this effect is by using margin-top: 95px;/*your nav height*/ on your content wrapper.

Answer 2

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;
}

Answer 3

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.