如何制作粘性导航栏? [英] How to make a sticky navigation bar ?
本文介绍了如何制作粘性导航栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码，希望大家帮助我.
This is My code , hope you guys help me .
我正在尝试创建一个导航栏，该导航栏停留在页面顶部，并在用户向下滚动时移动.
Im trying to create a navigate bar that stick on the top of the page and moves when the user scroll down .
<!DOCTYPE html>
<html>
<title>New Technology Planet</title>
<head>
<style>
header {
background-image : url("pic15.jpg");
color:white;
text-align:center;
padding:150px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li.logo{
border-right: none;
font-family:Impact, Charcoal, sans-serif;
color:white;
font-size:40px;
margin-top: 15px;
padding-left:30px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 25px 30px;
text-decoration: none;
font-size:20px;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#section {
width:350px;
float:center;
padding:10px;
}
#footer {
background-image : url("pic17.jpg");
color:white;
clear:both;
text-align:center;
padding:100px;
}
#header{
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
</head>
<body>
<header>
<h1>New Technology Planet</h1>
<p><h3>The WebSite Is Still Under Construction By Laith SJ</h3></p>
<p>Teamspeak3 & WebSites Hosting</p>
<p>Our goal is to give you the best what we can do!</p>
</header>
<!-- Navagator start -->
<nav role='navigation'>
<ul>
<li class="logo">NewTecPlanet</li>
<ul style="float:right;list-style-type:none;">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News|Updates</a></li>
<li><a href="#contact">Products</a></li>
<li><a href="#login">SignUp | Login</a></li>
<li><a href="#about">About US</a></li>
<li><a href="#about">Contact Us</a></li>
</ul>
</ul>
</nav>
<!-- navagattor end code -->
<!-- -->
<div id="section">
<h2>test</h2>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<!-- last part of the page -->
<div id="footer">
New Technology Planet
</div>
</body>
</html>如果您认为有什么好处对观众有帮助，请随时编辑该帖子，并希望您可以对其进行编辑以使它工作良好.
Guys please feel free to edit the post if you think that there is something good will help the viewers , and hope if you can edit the code so it can works good .
如果您需要举个例子，让我知道，我不想发布其他网站，所以我不会违反任何规则.
if you need an example about what im asking let me know , i dont want to post other websites so i dont break any rules .
谢谢
推荐答案
创建一个类 sticky ，并为其指定一个 position:fixed .滚动查看窗口的&导航栏位置，然后将该类别分配给您的导航，以将其粘贴在屏幕顶部.请参见下面的示例:
Create a class sticky and give it a position:fixed. On scroll check the window's & nav bar position then assign that class to your nav to stick it at the top of the screen. See the example below:
var topNav = document.getElementById("topNav"),
stop = topNav.offsetTop,
docBody = document.documentElement || document.body.parentNode || document.body,
hasOffset = window.pageYOffset !== undefined,
scrollTop;
window.onscroll = function(e) {
scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
if (scrollTop >= stop) {
topNav.className = 'sticky';
} else {
topNav.className = '';
}
} header {
background-image: url("pic15.jpg");
color: #5A4A4A;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li.logo {
border-right: none;
font-family: Impact, Charcoal, sans-serif;
color: white;
font-size: 40px;
margin-top: 15px;
padding-left: 30px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 25px 30px;
text-decoration: none;
font-size: 20px;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#section {
width: 350px;
float: center;
padding: 10px;
}
#footer {
background-image: url("pic17.jpg");
color: white;
clear: both;
text-align: center;
padding: 100px;
}
#header {
font-family: "Comic Sans MS", cursive, sans-serif;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}<header>
<h1>New Technology Planet</h1>
<p>
<h3>The WebSite Is Still Under Construction By Laith SJ</h3>
</p>
<p>Teamspeak3 & WebSites Hosting</p>
<p>Our goal is to give you the best what we can do!</p>
</header>
<!-- Navagator start -->
<nav role='navigation' id="topNav" class="">
<ul>
<li class="logo">NewTecPlanet</li>
<ul style="float:right;list-style-type:none;">
<li><a class="active" href="#home">Home</a>
</li>
<li><a href="#news">News|Updates</a>
</li>
<li><a href="#contact">Products</a>
</li>
<li><a href="#login">SignUp | Login</a>
</li>
<li><a href="#about">About US</a>
</li>
<li><a href="#about">Contact Us</a>
</li>
</ul>
</ul>
</nav>
<!-- navagattor end code -->
<!-- -->
<div id="section">
<h2>test</h2>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<!-- last part of the page -->
<div id="footer">
New Technology Planet
</div>这篇关于如何制作粘性导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
