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

请参阅我的示例here。

这可以通过偏移导航div占用的空间来实现，但是因为它已经从文档流中取出position: fixed;。

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

Answer 2

如果您的菜单高度是可变的（为了响应或因为它是动态加载的），您可以将上边距设置为固定div结束的位置。例如：

CSS

setlocal enabledelayedexpansion
FOR %%1 IN ("%CXFHOME%\lib\*.jar") DO SET CLASSPATH=!CLASSPATH!;%%1
echo %classpath:~1%

的Javascript

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

HTML

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

这是一个小提琴（https://jsfiddle.net/632k9xkv/5/），它使用固定的导航菜单和标题稍微超出了这个范围，试图让它成为一个有用的样本。

Answer 3

刚刚挣扎于此并且不喜欢一些“黑客”解决方案，我觉得这很有用而且很干净：

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

Answer 4

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

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

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

Answer 5

用另一个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;
}

关于菜单下方的页面，你也可以给它一个填充顶部：

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

Answer 6

我刚刚在导航下面的div添加了一个填充顶部。希望能帮助到你。我是新手。 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 7

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

如果你设置了一个边距或填充，它会滚动页面，你会丢失线条 - 试试this page

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

边距顶部或填充顶部将主要部门定位在固定部门下方，但当您向下翻页或单击滚动条滚动页面的一个视口高度时，它将全部平放在其面上。

同样的问题，如果你翻页，行“掉落”在视口的底部。

是否有人对此问题有实际解决方法？

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

我已经查看过许多声称是顶部有固定分区的正常运行页面的示例，但它们不起作用！他们都有滚动的问题。

我遇到过一些似乎有用的页面，但是如果固定分区更高，则会丢失线条。我相信我知道他们为什么会工作。

根据完全正常（没有花哨的格式化）页面上的文本滚动来思考。向上滚动时是否看到底线，或者看到下一行 - 底部是否已从视口顶部滚动？

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

似乎工作的固定菜单页面确实没有。滚动它们，底线从视口滚动，但由于下一行是可见的，看起来固定的除法有效 - 但我们知道的更好，不是吗？

如果固定除法高于一行文本的高度，则它们会失败并且行会丢失。

我见过的唯一可以正常使用的网页是在雅虎这样的网站上，我没有时间，也没有倾向于深入研究CSS上的大量CSS，HTML和JavaScript。了解问题的核心页面。

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

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

我的页面是一个很好的地方，可以看看能够在顶部修复一个分区，将它居中（和主分区）并将其限制为最大宽度所需的内容。它可能对你们中的一些人有所帮助，但对不起，我对滚动问题没有解决方法

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

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

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

那么 - 与FF有什么不同？

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

使用Chrome进行的更多测试表明，滚动时无法完全显示底线。

，只需在滚动时可以看到位于底部的一部分线 - 所以，仍然需要修复。

Answer 8

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

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

Answer 9

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

Answer 10

您应该尝试Pen我希望这会对您有所帮助，甚至可以提供更好的功能来使用固定导航

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

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 {
    height: 100px;
    max-height: 35vh;
}

这至少对我有用。

Answer 13

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

一旦在流程中放置以下元素，并且
固定一次以获得所需的视觉效果。

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

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

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

13 个答案: