CSS 如何制作定位菜单栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20630848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a fix positioned menu bar?
提问by cyrfandli
回答by SW4
What you're after is a 'sticky navbar/menu'.
您所追求的是“粘性导航栏/菜单”。
The simplest way would be to add the below CSS to your menu/navbar
最简单的方法是将以下 CSS 添加到您的菜单/导航栏
position:fixed;
top:0px;
That said, for an effect closer to the one you've posted, you'll probably want to look at using some jQuery, e.g.:
也就是说，为了获得更接近您发布的效果，您可能需要考虑使用一些 jQuery，例如：
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
}
else {
$('.menu').removeClass('fixed');
}
});
What this does is 'fix' the menu bar to the top of the page once you scroll past a certain point (e.g. 50px) by adding the CSS class 'fixed' to the .menuelement, the fixed class would simply be e.g. the CSS above.
它的作用是通过将 CSS 类“fixed”添加到.menu元素，将菜单栏“固定”到页面顶部，一旦滚动超过某个点（例如 50px），则固定类将只是例如上面的 CSS。
There are some nice examples listed here.
这里列出了一些很好的例子。
回答by Amarnath Balasubramanian
Source:Creating a sticky nav css and jquery
HTML
HTML
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
This is some content 0<br/>
This is some content 1<br/>
This is some content 2<br/>
This is some content 3<br/>
This is some content 4<br/>
This is some content 5<br/>
This is some content 6<br/>
This is some content 7<br/>
This is some content 8<br/>
<div id="data" />
</div>
CSS
CSS
* {
font-family: Consolas,Sans-serif;
font-size: 10pt;
}
#menu {
position: absolute;
width: 100%;
}
#menu.out {
position: fixed;
}
#menu ul {
margin: 0;
padding: 1em .5em;
list-style: none;
background-color: #fc9;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
padding: 5px .5em;
}
#content {
background-color: #ebebee;
padding: 4em 1em 1em;
height: 900px;
}
JQuery:
查询：
var menu = $("#menu");
var ul = menu.find("ul");
var content = $("#content")[0];
var data = $("#data");
var menuHeight = menu[0].getBoundingClientRect().bottom;
var inView= true;
$(document).scroll(function(evt) {
evt.preventDefault();
var top = content.getBoundingClientRect().top;
var nextInView = top+menuHeight > 0;
if (inView ^ nextInView)
{
data.append("<div>Switching.</div>")
inView = nextInView;
if (inView)
{
menu.removeClass("out");
}
else
{
menu.addClass("out");
ul.hide().slideDown("fast");
}
}
});
Fiddle :Demo
小提琴：演示
Courtesy : Robert Koritnik
礼貌：罗伯特·科里特尼克
Hope this helps
希望这可以帮助
Happy Coding
快乐编码
