固定菜单和转到顶部按钮

时间:2014-11-06 23:55:37

标签: html css

我有一个固定的顶栏,当我滚动它仍然显示。

现在我还有一个"转到顶部"页面底部的按钮一直持续到顶部元素#main。

问题在于,一旦我使用按钮转到顶部,菜单就会超出顶部元素(不知道如何解释所以检查图像)。

Before After

顶级元素(按钮指向#main)

<div id="wrap">
 <div id="main">
  <head>
   ...
  </head>
  <body>
   <header id="header">
    ...
   </header>
   ...
  </body>
 </div>
</div>
<div id="footer">
...
</div>

CSS

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

顶部栏菜单在正文中初始化。一旦我点击转到顶部按钮,我基本上需要它看起来像第一个图像。手动滚动到顶部不会引起任何问题。

2 个答案:

答案 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解决方案,我很乐意听到它!