固定菜单和转到顶部按钮
[英]fixed menu and goto top button
问题描述
I have a fixed top bar that when I scroll it is still showing. 
我有一个固定的顶部栏，当我滚动时它仍然显示。
Now I also have a "goto top" button at the bottom of the page which goes all the way until the top element #main. 现在，我在页面底部还有一个“ goto top”按钮，一直到顶部元素#main为止。
The issue is that once I goto the top with the button, the menu results in being above the top element (don't know how to explain so check image). 问题是，一旦我通过按钮转到顶部，菜单就会位于顶部元素上方（不知道如何解释，因此请检查图像）。
Top elements (button leades to #main) 顶部元素（按钮指向#main）
<div id="wrap">
<div id="main">
<head>
...
</head>
<body>
<header id="header">
...
</header>
...
</body>
</div>
</div>
<div id="footer">
...
</div>
CSS 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;
}
top bar menu is initialized in the body. 顶部栏菜单在正文中初始化。 I basically need it to appear like the first image once I click on the goto top button. 一旦单击goto top按钮，我基本上需要它像第一张图像一样出现。 Manually scrolling to the top raises no issues. 手动滚动到顶部不会出现任何问题。
2 个解决方案
解决方案1
0 2014-11-07 00:01:02
The menu is 'sticky' to the top once scrolling down begins. 向下滚动开始后，菜单将“粘”在顶部。 If instead of clicking the 'goto top' button, you scroll back up to the top, does this issue still occur? 如果您向上滚动到顶部而不是单击“转到顶部”按钮，是否还会发生此问题？
解决方案2
0 2014-11-07 01:09:27
Because your topbar is fixed it is removed from the flow of the page. 由于您的顶部栏是固定的，因此已从页面流中删除。 You probably gave #main or #wrap a margin-top -value to make the content appear below the topbar in response to this behavior. 您可能会给#main或#wrap一个margin-top -value来使内容显示在顶部栏下方，以响应此行为。 Now it looked good when you load the page. 现在，加载页面时看起来不错。
What happens now 现在发生了什么
If you open the page at www.yourpage.com#main the main content will appear at the top of your browser. 如果您在www.yourpage.com＃main上打开页面，则主要内容将显示在浏览器的顶部。 This actually ignores the margin of #main. 实际上，这忽略了#main的边距。 The margin appears "above" your browser, making it look like it does. 页边距显示在浏览器的“上方”，使其看起来像。
What to do 该怎么办
So what to do...one solution would be to use javascrpt / JQuery to "code" around this. 所以该怎么办...一种解决方案是使用javascrpt / JQuery对此进行“编码”。 But I ll only explain the css method. 但是我只会解释css方法。 Just comment if you realy, really, really want to know the javascript solution (and I ll try to make one up) 如果您确实非常想知道javascript解决方案，请发表评论（我会尽力补充一下）
Another way is to put #wrap on a fixed position on the page. 另一种方法是将#wrap放在页面上的固定位置。 This would result into a slightly odd scrollbar and you may need to add another wrapper inside that one if you want a centered fixed-width view. 这将导致滚动条稍微有些奇怪，如果要居中固定宽度的视图，可能需要在其中添加另一个包装。 Here is the CSS-code you could use on the #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: If there sa more elegant css-solution to this I d love to hear it! PS：如果对此有更优雅的CSS解决方案，我很想听听！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.