如何使内容出现在固定的DIV元素下方？

Question

如何使内容出现在固定的DIV元素下方？

91

我的意图是在页面顶部创建一个菜单，即使用户滚动页面，它也会保持在页面的顶部（就像 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>

目前，我可以通过将菜单放置在我的containerdiv中，在页面顶部居中显示菜单。但是，内容会出现在菜单后面。我已经设置了clear:both;，但这没有帮助。

- Mus

1

我可以建议您查看这个链接，以获取您所寻找的良好实现？http://twitter.github.com/bootstrap/对于一般的良好CSS实践来说，这是一个很好的起点。 - Finnnn

5

2020 年，您现在可以使用 position: sticky; 了。如果您像我一样看到了这篇帖子，可以参考https://caniuse.com/#feat=css-sticky。 - Shaun Moore

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Elswick · Answer 1

这是使用jQuery实现响应式的方法。

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

- shaz3e · Answer 2

你应该尝试一下针，我希望它能够帮助你并提供更好的功能来使用固定导航。

1.clear:both;你无需使用清除。

- Samuel Cabrera · Answer 3

在头部和主体之间必须放置一个#spacer div，就像这样：

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

头部的position将会是fixed，而间隔将保持其默认的static位置：

header {position: fixed;}

最后，您需要确保标题和间隔符具有相同的大小相关属性，如下所示：

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

至少对我来说这个可行。