我的网页顶部有以下代码：
<body> <div class="agile-main"> <div class="menu-wrap" id="style-1"> <nav class="top-nav">
<ul class="icon-list">
<li><a href="index.html"><i class="glyphicon glyphicon-home"></i> Home </a></li>
<li><a href="about.html"><i class="glyphicon glyphicon-info-sign"></i> About </a></li>
<li><a href="property.html"><i class="glyphicon glyphicon-briefcase"></i> properties </a></li>
<li><a href="agents.html"><i class="glyphicon glyphicon-eye-open"></i> Agents </a></li>
<li><a href="gallery.html"><i class="glyphicon glyphicon-picture"></i> Gallery</a></li>
<li><a class="active" href="contact.html"><i class="glyphicon glyphicon-envelope"></i> Contact </a></li>
</ul> </nav> <button class="close-button" id="close-button">C</button> </div> <div class="content-wrap"> <div class="header">
<div class="menu-icon">
<button class="menu-button" id="open-button">O</button>
</div>
<div class="logo">
<h2><a href="main.html">FE</a></h2>
</div>
<div class="clearfix"> </div> </div>
<div class="content"> Page content goes here </div>
</body>
我想让导航栏变粘 - 当页面向下滚动时保持在顶部，我已经应用了样式样式=“溢出：隐藏;位置：固定;顶部：0;宽度：100％;” 到导航标签，但ID不起作用，我也应用了其他顶级div标签，整个页面冻结或无法正常工作。如何让导航栏变粘？
谢谢。
答案 0 :(得分：0)
position: fixed和top: 0是实现粘性标头所需的唯一CSS属性。运行下面的代码片段以观察此情况。
.icon-list {
list-style: none;
}
.icon-list li {
float: left;
margin-right: 5px;
}
.menu-wrap {
clear: both;
}
.top-nav {
position: fixed;
top: 0;
}<body>
<div class="agile-main">
<div class="menu-wrap" id="style-1">
<nav class="top-nav">
<ul class="icon-list">
<li><a href="index.html"><i class="glyphicon glyphicon-home"></i> Home </a></li>
<li><a href="about.html"><i class="glyphicon glyphicon-info-sign"></i> About </a></li>
<li><a href="property.html"><i class="glyphicon glyphicon-briefcase"></i> properties </a></li>
<li><a href="agents.html"><i class="glyphicon glyphicon-eye-open"></i> Agents </a></li>
<li><a href="gallery.html"><i class="glyphicon glyphicon-picture"></i> Gallery</a></li>
<li><a class="active" href="contact.html"><i class="glyphicon glyphicon-envelope"></i> Contact </a></li>
</ul>
</nav>
<button class="close-button" id="close-button">C</button>
</div>
<div class="content-wrap">
<div class="header">
<div class="menu-icon">
<button class="menu-button" id="open-button">O</button>
</div>
<div class="logo">
<h2><a href="main.html">FE</a></h2>
</div>
<div class="clearfix"> </div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum porta ex eget auctor. Quisque varius magna sed auctor placerat. Maecenas quis volutpat elit. Vivamus sit amet turpis lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla egestas id libero at accumsan. In iaculis quam ligula, in consectetur augue porttitor nec. Quisque pharetra vel magna vitae tempor. Suspendisse at libero ut lectus consectetur viverra. Morbi pellentesque lectus ex, ut auctor lacus condimentum eu. Morbi vel pulvinar ex.</p>
<p>Duis ornare fermentum lacus sed rutrum. Sed id iaculis mi, at imperdiet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas finibus interdum varius. Nunc hendrerit consectetur lacus, sed tempor velit fermentum non. Cras molestie est non neque pharetra, sed auctor elit iaculis. Sed eget massa efficitur, finibus augue at, blandit nulla. Praesent sed cursus ipsum. Duis tincidunt massa in est interdum porttitor. Pellentesque eu dignissim tortor. Nunc non ligula odio. Sed vel finibus ante. Cras vitae ipsum non sapien tincidunt fringilla at et dui. Suspendisse sapien ligula, varius in nisi faucibus, luctus ullamcorper justo. Sed dignissim nec nulla ut vestibulum. Praesent et purus vitae dolor malesuada vestibulum quis et elit.</p>
<p>Quisque augue justo, imperdiet ut nunc ut, aliquet tincidunt metus. Nam laoreet sapien a tortor faucibus cursus. Curabitur euismod ornare dapibus. Nullam ac orci vel risus consequat vehicula condimentum pharetra lacus. Praesent pulvinar lectus dignissim urna molestie porta. Cras facilisis, nisi nec auctor commodo, nulla nulla consectetur sem, a vehicula metus risus sed ante. Suspendisse sodales justo et velit scelerisque feugiat. Sed libero mauris, placerat et mi non, euismod pretium elit. Aenean mi dui, tincidunt non pretium at, congue eget enim.</p>
<p>Mauris vulputate sit amet tortor in tempus. Mauris nec leo pellentesque, consectetur dui ut, tristique augue. Quisque eget rutrum orci, in congue nibh. Fusce feugiat tellus ut dolor accumsan, et tempor metus cursus. Donec id dolor massa. Maecenas dui nulla, hendrerit quis dictum sed, elementum aliquam dolor. Vestibulum sit amet posuere risus, ut eleifend augue. Integer nisi dolor, accumsan cursus mauris quis, rutrum tincidunt nisi. Aenean volutpat odio varius mi mollis, ut lacinia diam malesuada. Praesent cursus sem eget lobortis mattis.</p>
<p>Curabitur ornare condimentum tellus, et eleifend tellus cursus non. Praesent venenatis imperdiet tellus, euismod lacinia tortor. Praesent a magna aliquet, vehicula arcu eu, maximus lacus. Donec bibendum rutrum dignissim. Sed consectetur laoreet nisl, a sodales turpis vestibulum in. Nulla lacinia velit eget maximus vehicula. In libero elit, mattis vel turpis sed, pretium auctor tortor. Quisque non convallis ligula. Curabitur et eros non lectus rutrum gravida. Aenean finibus ante sed neque posuere, non convallis urna faucibus. Nunc congue facilisis urna et bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor bibendum tortor quis varius. Pellentesque bibendum sem vel dolor consequat, id sodales ante scelerisque. Phasellus ornare lobortis tellus a mollis.</p>
<p>Fusce non nibh convallis, venenatis quam malesuada, cursus lorem. Aliquam nunc enim, auctor sit amet imperdiet id, faucibus vel erat. Proin posuere molestie lorem. Sed non tellus et neque egestas dictum sit amet vel mi. Nunc euismod nulla at scelerisque mollis. Pellentesque enim lectus, dapibus vel molestie ut, iaculis nec ex. Donec ac elementum nisl. Duis elementum eu sem quis iaculis. Vivamus consectetur lectus lectus, quis ultricies est semper ut. Integer ut ultricies dui. Sed ut condimentum urna, sit amet cursus ligula. Donec id enim sed erat semper imperdiet quis eget ex. Maecenas facilisis massa quis molestie auctor. Donec laoreet varius ante, eu malesuada libero tristique eget. Aenean feugiat, nisi sagittis vestibulum mattis, est dolor ultricies eros, non consectetur nibh risus condimentum nunc.</p>
<p>Vestibulum arcu mauris, laoreet et euismod quis, rhoncus eu diam. Etiam eget commodo tortor. Aliquam vitae dapibus tortor. Morbi nec ex nunc. Ut ullamcorper orci in nisi dignissim, a aliquet nisl placerat. Integer dictum justo ut nulla sollicitudin dictum. Vestibulum in ipsum eu mauris viverra venenatis. Quisque ornare vitae eros vitae scelerisque. Donec in urna sit amet orci dignissim molestie. Etiam sed tellus ac ex feugiat feugiat. In ipsum justo, pellentesque nec mollis sit amet, mollis sed sapien. Mauris mauris est, interdum et sodales at, maximus a est. Proin semper rutrum mi nec viverra. Aenean tempus tellus metus, non rutrum justo malesuada ut.</p>
<p>Quisque finibus cursus tincidunt. In id lectus interdum turpis rutrum efficitur et nec dui. Etiam luctus sem ex, ut pellentesque ipsum sagittis sed. In id tellus facilisis, sagittis lacus ac, varius mi. Suspendisse ultricies ante in nisi sollicitudin mollis. Donec porta lorem nec massa aliquam semper. Aliquam non ex nisi. Aenean dapibus nisi aliquam erat iaculis, ac rutrum mauris rhoncus. Aenean sed pharetra magna, vel ultrices ipsum. Etiam suscipit nibh justo, sed pharetra lacus pharetra et. Ut posuere lacus tellus, ut egestas tellus ultricies nec. Praesent fermentum enim accumsan ex elementum pharetra.</p>
</div>
</body>
答案 1 :(得分：0)
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<p>Some text some text some text some text..</p>
</div>
答案 2 :(得分：0)
jQuery(window).scroll(function(){
scrolled_val=jQuery(document).scrollTop().valueOf();
if(scrolled_val>160){
jQuery("header").addClass("sticky");
}
else{
jQuery("header").removeClass("sticky");
}
});body{height:2000px;}
/* Header */
header{letter-spacing:1px;padding:15px 0;position:fixed;z-index:999;background-color: rgba(255,255,255,0.9);width:100%;transition:300ms all;box-shadow:0 0 5px #999;}
header.sticky{padding:0;background-color:#fff;}
.brand-logo{float:left;font-family: 'RioGlamour';}
.brand-logo a{color:#333;font-weight:600;}
.brand-logo a h1::first-letter {color: #FF6801;font-weight:800;}
.brand-logo a h1{margin:0;}
nav{float:right;font-family: 'Quicksand', sans-serif; }
nav ul{padding:0;margin:0;}
nav ul li{display:inline-block;float:left;font-weight:700;}
nav ul li a{color:#333;padding:10px 15px;font-size:16px;display:block;}
/* Header end */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<div class="container">
<div class="brand-logo">
<a href="#"><h1>Logo</h1></a>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
答案 3 :(得分：0)
通过在导航栏中添加style="position:fixed;"，可以使菜单栏保持粘性