如何使内容出现在固定的 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 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>

还有 CSS：

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

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

关于菜单下方的页面，您也可以给它一个 padding-top：

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

Answer 2

您需要的是一个额外的间距 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;
}

看我的例子here。

这是通过抵消导航 div 所占用的空间来实现的，但由于它有 position: fixed;，它已从文档流中取出。

---

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

Answer 3

我刚遇到这个问题，这是我的解决方案：

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

调整浮动菜单的高度。如果你不确定它是一个 div 跟随，那么你可以使用* 而不是div。这都是有效的 CSS2。

Answer 4

你应该试试Pen，希望对你有帮助，甚至提供更多更好的功能来使用固定导航

1.clear:both;你不需要使用clear

Answer 5

我刚刚在导航下方的 div 中添加了一个 padding-top。希望能帮助到你。我是新来的。 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;
}

Answer 6

如果您的菜单高度是可变的（为了响应性或因为它是动态加载的），您可以将上边距设置为固定 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 7

对于那些建议使用 margin-top 或 padding-top 将主分区移动到固定菜单下方的人 - 你似乎没有完全测试它。

如果您设置了边距或内边距，它将随着页面滚动并且您会丢失行 - 请尝试this page

看起来不错，不是吗？突出显示底部可见行上的一个单词并按下 page-down - 带有突出显示的单词的行和其他几行将在固定分割下滚动。

Margin-top 或 padding-top 会将主分区定位在固定分区下方，但当您向下翻页或单击滚动条以滚动页面的一个视口高度时，它会全部平放在其正面。

如果您向上翻页，也会出现同样的问题，线条会从视口底部“脱落”。

有人对这个问题有实际的解决方法吗？

我知道如何定位 - 如果您了解有关边距、填充等的基础知识，这相当容易 - 但是如何防止滚动时丢失线条？

我查看了许多声称功能正常的页面的示例，这些页面在顶部具有固定的分区，但它们不起作用！他们都有滚动的问题。

我遇到过一些页面似乎可以工作，但如果将固定分区设置得更高，则会丢失行。我相信我知道它们为什么会起作用。

考虑完全正常（没有花哨的格式）页面上的文本如何滚动。当您向上滚动时，您看到底线还是看到下一行 - 底部已滚动到视口顶部？

答案 - 您会看到底线滚动成为顶线。

看似有效的固定菜单页面实际上并没有。滚动它们，底线将滚动出视口，但由于下一行是可见的，因此固定分割似乎有效 - 但我们知道得更好，不是吗？

如果固定分割高于一行文本的高度，则会失败并丢失行。

我见过的唯一能正常工作的页面是在 yahoo 等网站上，我没有时间也没有兴趣深入研究上面的大量 CSS、HTML 和 JavaScript了解问题的核心。

所以 - 转到该页面，看看您是否可以进行更改（“检查”元素并更改 CSS 规则）以解决滚动问题。

如果可以，请回来与全世界分享您的发现。

我的页面是一个很好的地方，可以查看如何将一个分区固定在顶部、居中（和主分区）并将其限制为最大宽度。它可能对你们中的一些人有所帮助，但很抱歉我没有解决滚动问题的方法

使用修复分区的高度 - 使其足够短，以便只显示一行，然后使用滚动播放。然后让它足够大，可以容纳两行，然后是三行，然后滚动播放。你会看到问题。

Here is a page 应该可以工作，但它没有 - 阅读最后一条评论 - 他们以不同的方式描述了问题，但这是同一个问题

我刚刚在 Chrome 中再次测试了该页面，它似乎运行得相当令人满意。对于FF，问题存在。还没试过IE。

那么 - FF 有什么不同？

Here's a page at cNet 适用于 chrome 和 ff - 那么他们在做什么呢？

使用 Chrome 进行的更多测试表明它在滚动时无法完全显示底线。当您滚动时，只有底部的部分行是可见的 - 所以，仍然需要修复。

Answer 8

刚刚为此苦苦挣扎并且不喜欢一些“黑客”解决方案，我发现这很有用且干净：

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

Answer 9

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

Answer 10

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

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

Answer 11

这是一种使用 jQuery 的响应式方法。

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

Answer 12

#spacer div 必须放在标题和主体之间，如下所示：

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

标题的position 将是fixed，而分隔符将保持其默认的static 位置：

header {position: fixed;}

最后，您需要确保 header 和 spacer 具有相同的与大小相关的属性，如下所示：

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

这至少对我有用。

Answer 13

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

• 在流​​程中定位以下元素，然后
• 为所需的视觉效果修复后。

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

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