it-swarm.cn

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

我的意图是在页面顶部创建一个菜单,即使用户滚动,菜单也将保留在页面顶部(例如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;,这没有帮助。

46
MusTheDataGuy

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

参见我的示例 此处

这是通过抵消导航div会占用的空间来实现的,但是它具有position: fixed;已从文档流中删除。


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

47
Kyle

如果您的菜单高度可变(出于响应性或因为它是动态加载的),则可以将上边距设置为固定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;
}

Java脚本

$(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/ ),它在固定导航菜单和标题上都超出了此范围,以期希望使它成为一个有用的示例。

14
grdevphl

刚刚为此苦苦挣扎并且不喜欢某些“黑客”解决方案后,我发现这是有用且干净的:

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

我只是有这个问题,这是我的解决方案:

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

调整为您的浮动菜单的高度。如果不确定是否跟随div,则可以使用*而不是div。这都是有效的CSS2。

5
Danimal

用另一个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 */
}
2
Erick Petrucelli

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

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

我只是在导航下方的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;
}
2
user4852538

对于那些建议使用margin-top或padding-top将主分区移动到固定菜单下方的用户-您似乎并未对其进行完整的测试。

如果设置了边距或填充,它将随页面滚动,并且您将丢失行-尝试 此页面

看起来不错,不是吗?在底部可见行上突出显示一个单词,然后按向下翻页-带有突出显示的单词的行以及其他几行将在固定分区下滚动。

页顶或页顶将主分区定位在固定分区的下方,但是当您向下翻页或单击滚动条滚动页面的一个视口高度时,主分区将全部平放在其表面上。

如果您向上翻页,则会出现同样的问题,行会从视口底部“掉落”。

有人对这个问题有实际的解决办法吗?

我知道如何放置东西-如果您了解边距,填充等基础知识就很容易-但是如何防止滚动时丢失行数?

我看过许多示例,这些示例声称是功能正常的页面,顶部固定分隔,但它们无法正常工作!它们都有滚动的问题。

我碰到过一些页面似乎可以正常工作,但是如果将固定的分区调高,行将会丢失。我相信我知道为什么它们似乎起作用。

考虑一下完全正常(无花式格式)页面上的文本如何滚动。向上滚动时是否看到底线,还是看到了下一行-滚动到视口顶部的底行?

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

固定菜单页面似乎无法正常工作。滚动它们,然后将底线滚动到视口之外,但是由于可以看到下一行,因此固定分隔似乎起作用了-但我们知道的更好,不是吗?

如果固定分隔线的高度超过一行文本的高度,则它们将失败并丢失行。

我所看到的唯一可以正常工作的页面是在yahoo之类的网站上,我没有时间也没有兴趣去研究页面上有多少CSS,HTML和JavaScript问题的核心.

因此-转到该页面,看看是否可以进行更改(“检查”元素并更改CSS规则)来解决滚动问题。

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

我的页面是查看在顶部固定分区,将其(和主要分区)居中并将其限制为最大宽度所需要的内容的好地方。它可能对某些人有帮助,但是很抱歉,我没有解决滚动问题的方法

以fix分区的高度播放-使其足够短,以便仅显示一行,然后播放滚动。然后使其足够大,可以容纳两行,然后容纳三行,并进行滚动。您会看到问题。

这里是页面 应该可以使用,但不能使用-请阅读最后的评论-他们以不同的方式描述问题,但问题相同

我只是在Chrome中再次测试了该页面,它似乎令人满意地工作。使用FF时存在问题。尚未尝试过IE,但是。

那么-FF有什么不同?

这是cNet上的页面 可以与chrome和ff-一起使用-那么他们在做什么?

使用Chrome进行的更多测试表明,滚动时无法完全显示底行。滚动时,只能看到位于底部的行的一部分-因此,仍然需要修复。

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

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

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

0
David Elswick

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

1 .clear:both;您不需要使用清除

0
shaz3e