导航栏在顶部使用CSS
我想让我的导航栏在网页上滚动时粘在顶部。导航栏在顶部使用CSS
我已经试过在这里寻找解决方案，但我挣扎着，因为它导致更多的错误。
当使用
position:fixed我发现它会导致我要低于我的旗帜标志与原来现在的位置问题。
我的HTML和CSS代码如下。
谢谢
/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}<header class="clearfix">
<div id="banner" class="middlecontent">
<a href="index.html"><img src="images/logobanner.png"></a>
</div>
<nav>
<div id="sitenav">
<ul >
<li><a href="index.html">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="about_us.html">About</a></li>
<li><a href="#">Student</a></li>
<li><a href="#">Staff</a></li>
</ul>
</div>
</nav>
</header>
如果没有需要支持旧的浏览器，你可以使用position: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning
这是非常不受支持... –
它主要是支持（简单的用途）https://caniuse.com/#search=sticky – MaanooAk
@MarioNikolaus'sticky'实际上[很好的支持]（https：// caniuse。 com /＃search = sticky）在大多数主流浏览器中都存在这样的问题，当然不支持某些元素（主要是表的子部分）。只要你不关心IE，它是可行的使用。 （您还需要为Safari提供前缀版本）。如果需要的话，您可以随时为不支持的浏览器进行填充。 –
请试试这个我添加一些代码。
JQuery的：
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});
的CSS：
body{
margin:0;
}
section{
background:#ccc;
height:800px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= ($("header").height())) {
$("#sitenav").addClass("fix-header");
} else {
$("#sitenav").removeClass("fix-header");
}
});/* ******************* */
/* Navigiation */
/* ******************* */
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}
body{
margin:0;
}
section{
background:#ccc;
height:1000px;
}
#sitenav.fix-header {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:0;
}
#sitenav.fix-header ul{
margin:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<div id="banner" class="middlecontent">
<a href="index.html"><img src="images/logobanner.png"></a>
</div>
<nav>
<div id="sitenav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="about_us.html">About</a></li>
<li><a href="#">Student</a></li>
<li><a href="#">Staff</a></li>
</ul>
</div>
</nav>
</header>
<!--this for demo for checking scroll-->
<section>
</section>这个问题是关于CSS ......建议在样式表中简单添加'position：sticky'时添加一个100k的JS库会做...不是最优的...至少可以说。如果用JS做，它可以用没有jQuery的相对较少的代码来完成。如果我们知道他们已经在使用jQuery，这可能是一个好的建议......但不知道这一点，我不确定这是对问题的有效回答。 –
@UselessCode好的，但请检查问题一次，因为用户希望导航粘滞后不需要默认粘滞粘贴这就是为什么我已经使用jQuery。 –
你应该试试这个代码。
$(window).ready(function() {
var header = $('nav').innerHeight();
var window_scroll = $(window).scrollTop();
if (window_scroll >= header) $("nav").addClass("sticky");
else $("header").removeClass("nav");
})
$(window).on("scroll", function() {
var header = $('nav').innerHeight();
var scroll = $(window).scrollTop();
if (scroll >= header) $("nav").addClass("sticky");
else $("nav").removeClass("sticky");
});nav{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
}
nav.sticky{
position:fixed;
width:100%;
z-index:99;
top:0;
left:0;
}
#sitenav a {
text-decoration: none;
color: white;
padding: inherit;
}
#sitenav ul {
background: black;
padding: 15px;
}
#sitenav ul li {
padding: 15px;
background: black;
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
display: inline;
}
#sitenav ul li:hover {
background: rgb(43, 78, 89);
color:white;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="clearfix">
<div id="banner" class="middlecontent">
<a href="index.html"><img src="images/logobanner.png"></a>
</div>
<nav>
<div id="sitenav">
<ul >
<li><a href="index.html">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="about_us.html">About</a></li>
<li><a href="#">Student</a></li>
<li><a href="#">Staff</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
您正在寻找'sticky'（看@cvgore答案） – MaanooAk
请检查我的答案，我认为这是对你有帮助。 –