如何在滚动时将导航栏固定在顶部

Question

好的，所以我想像本网站一样在顶部滚动条上固定导航栏-http: //manipal.edu/好的，我知道，他们有很多与此类似的问题，但是我无法在代码中应用它们。 请帮忙

这是我的小提琴

 body { width: 100%; height: 100%; margin: 0px; } .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #f2f2f2; } .navbar li { float: left; } li a, .dropbtn { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar li a:hover, .dropdown:hover .dropbtn { background-color: #333; color: #f2f2f2; } .navbar li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #333 } .navbar .show { display: block; } .xavierslogo { width: 110px; height: 109px; margin-left: 20%; } .xavierstext { width: ; height: ; margin-left: 0%; } .topbg { background-color: #333; } 

 <header class="topbg"> <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> </header> <ul class="navbar"> <li><a href="#home">Home</a> </li> <li><a href="#news">Text one</a> </li> <li><a href="#news">Text Two</a> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <div class="main"> z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br> </div> 

Answer 1

试试这个...

您必须为此片段使用jQuery 。

 $(document).ready(function() { $(window).scroll(function() { if ($(window).scrollTop() > $('header').height()) $('.navbar').addClass('topNav'); else $('.navbar').removeClass('topNav'); }); }); 

 body { width: 100%; height: 100%; margin: 0px; } .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #f2f2f2; } .navbar li { float: left; } li a, .dropbtn { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar li a:hover, .dropdown:hover .dropbtn { background-color: #333; color: #f2f2f2; } .navbar li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #333 } .navbar .show { display: block; } .xavierslogo { width: 110px; height: 109px; margin-left: 20%; } .xavierstext { width: ; height: ; margin-left: 0%; } .topbg { background-color: #333; } .topNav { position: fixed; top: 0; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <header class="topbg"> <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> </header> <ul class="navbar"> <li><a href="#home">Home</a> </li> <li><a href="#news">Text one</a> </li> <li><a href="#news">Text Two</a> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <div class="main"> z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br> </div> 

如果您希望使用纯/纯JavaScript

 function topScrl() { if (document.getElementById('body1').scrollTop > document.getElementById('head1').clientHeight) document.getElementById('nav1').className = "topNav navbar"; else document.getElementById('nav1').className = "navbar"; } 

 body { width: 100%; height: 100%; margin: 0px; } .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #f2f2f2; } .navbar li { float: left; } li a, .dropbtn { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar li a:hover, .dropdown:hover .dropbtn { background-color: #333; color: #f2f2f2; } .navbar li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #333 } .navbar .show { display: block; } .xavierslogo { width: 110px; height: 109px; margin-left: 20%; } .xavierstext { width: ; height: ; margin-left: 0%; } .topbg { background-color: #333; } .topNav { position: fixed; top: 0; width: 100%; } 

 <body id="body1" onscroll="topScrl()"> <header id="head1" class="topbg"> <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> </header> <ul id="nav1" class="navbar"> <li><a href="#home">Home</a> </li> <li><a href="#news">Text one</a> </li> <li><a href="#news">Text Two</a> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <div class="main"> z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br>z <br> </div> </body>