如何使内容显示在固定的DIV元素下？

Question

我的目的是在页面顶部创建一个菜单,即使用户滚动也会保留在页面顶部(例如Gmail的最新功能,其中常用按钮向下滚动,以便用户执行对消息的操作,而不必滚动到页面顶部).

我还想将下面菜单下面的内容设置在它下面 - 目前,它出现在它后面.

我的目标是这样的:

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

我希望顶部的菜单永远不会移动,并且位于页面顶部,即使用户向下滚动也是如此.当用户位于页面顶部时,我也希望主菜单在菜单下面开始,但是当用户向下滚动时,菜单是否超出内容的顶部并不重要.

摘要:

• 我希望页面顶部有一个固定的位置菜单,滚动时跟在用户后面.
• 仅当用户位于页面顶部时,内容才必须显示在菜单下方.
  • 当用户向下滚动时,菜单可以与内容重叠.

有人可以解释一下如何实现这个目标吗？

谢谢.

更新:

CSS代码:

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

HTML代码:

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

目前,我可以将菜单显示在页面顶部,并将其置于我的内部中心container div.但是,内容落后于菜单.我已经设定clear: both;,这没有帮助.

Answer 1

你需要的是一个额外的间距div(据我所知你的问题).

此div将放置在菜单和内容之间,并且与菜单div,包括填充的高度相同.

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

见我的例子在这里.

这通过抵消将由nav div占用的空间来工作,但是因为它已经position: fixed;从文档流中取出.

实现此效果的首选方法是margin-top: 95px;/*your nav height*/在内容包装器上使用.

Answer 2

如果您的菜单高度是可变的(为了响应或因为它是动态加载的),您可以将上边距设置为固定div结束的位置.例如:

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>
...

这是一个小提琴(https://jsfiddle.net/632k9xkv/5/)与固定的导航菜单和标题有点超出这个范围,试图有希望使这个成为一个有用的样本.

Answer 3

刚刚遇到这种情况并且不喜欢一些"黑客"的解决方案,我发现这很有用而且干净:

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

Answer 4

我刚遇到这个问题,这是我的解决方案:

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

调整floatingMenu的高度.如果您不确定它是否为div,那么您可以使用*而不是div.这都是有效的CSS2.

Answer 5

我最喜欢grdevphl 的 Javascript 答案，但在我自己的用例中，我发现height()在计算中使用仍然留下了一点重叠，因为它没有考虑填充。如果您遇到同样的问题，请尝试outerHeight()补偿填充和边框。

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

Answer 6

有（至少）一种方法可以在没有 javascript 的情况下获得真正的动态高度：插入菜单两次：

• 一旦在流中定位以下元素，以及
• 一旦固定以获得所需的视觉效果。

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

根据您网站的其余部分，您可能需要调整元素的z-index样式<nav>。