我有一个固定的顶栏,当我滚动它仍然显示。
现在我还有一个"转到顶部"页面底部的按钮一直持续到顶部元素#main。
问题在于,一旦我使用按钮转到顶部,菜单就会超出顶部元素(不知道如何解释所以检查图像)。
<div id="wrap">
<div id="main">
<head>
...
</head>
<body>
<header id="header">
...
</header>
...
</body>
</div>
</div>
<div id="footer">
...
</div>
#header{ /* top bar is inside the header id */
background: darken(#228b22, 1%);
height: 65px;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 60px;
} /* must be same height as the footer */
div#footer { /* sticky footer */
position: relative;
margin-top: -60px; /* negative value of footer height */
height: 60px;
clear:both;
}
顶部栏菜单在正文中初始化。一旦我点击转到顶部按钮,我基本上需要它看起来像第一个图像。手动滚动到顶部不会引起任何问题。
答案 0 :(得分:0)
菜单“粘”&#39;向下滚动开始到顶部。如果不是点击“转到”顶部&#39;而不是按钮,您向上滚动到顶部,这个问题仍然会发生吗?
答案 1 :(得分:0)
由于您的顶栏已修复,因此会从页面流中删除它。您可能为#main或#wrap提供了margin-top -value,以使内容显示在顶部栏下方以响应此行为。现在加载页面时看起来很不错。
现在发生什么
如果您在www.yourpage.com#main上打开该页面,主要内容将显示在浏览器的顶部。这实际上忽略了#main的边缘。保证金出现在&#34;以上&#34;你的浏览器,看起来像它。
怎么做
那么该做什么......一个解决方案就是使用javascrpt / JQuery来代码&#34;代码&#34;围绕这个。但我只会解释css方法。只是评论,如果你真的,真的,真的想知道javascript解决方案(我会尝试制作一个)
另一种方法是将#wrap放在页面上的固定位置。这会产生一个略微奇怪的滚动条,如果你想要一个居中的固定宽度视图,你可能需要在那个内部添加另一个包装器。这是您可以在#wrap上使用的CSS代码。
#wrap{
position: fixed;
top: 100px;/*height you want to start you content to appear*/
left: 0;
right: 0;
bottom: 0px;
overflow: auto;/*adds scrollbars when needed*/
}
#main{
margin-top: 0px; /*you are not using this top position #main anymore*/
}
PS:如果有一个更优雅的CSS解决方案,我很乐意听到它!