固定菜单和转到顶部按钮

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

标签： html css

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

现在我还有一个＆＃34;转到顶部＆＃34;页面底部的按钮一直持续到顶部元素#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解决方案，我很乐意听到它！

相关问题
最新问题