如何制作粘性导航栏？ [关闭]答案

【问题标题】：How to make a sticky navigation bar ? [closed]如何制作粘性导航栏？ [关闭]
【发布时间】：2016-01-27 21:32:10
【问题描述】：

这是我的代码，希望你们帮助我。

我正在尝试创建一个导航栏，该导航栏粘贴在页面顶部并在用户向下滚动时移动。

<!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>

如果您认为有什么好的东西可以帮助观众，请随时编辑帖子，并希望您可以编辑代码，以便它可以正常工作。

如果你需要一个关于我问什么的例子，请告诉我，我不想发布其他网站，所以我不违反任何规则。

谢谢

【问题讨论】：

position: fixed 将元素固定到视口而不是文档。
我假设您的意思是当窗口顶部经过时，导航栏会粘住并保持可见？ - stackoverflow.com/questions/28452235/… 的可能重复项
是的，这就是我的意思，当用户向上滚动时，导航栏会回到旧位置。我厌倦了看你划线的页面，但我什么都听不懂，我试图测试它，但它没有用。我可以链接一个我问的例子吗？

标签： html css

【解决方案1】：

创建一个类sticky 并给它一个position:fixed。在滚动时检查窗口和导航栏的位置，然后将该类分配给您的导航以将其粘贴在屏幕顶部。请看下面的例子：

JSFiddle

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>

【讨论】：

我试过了，但没用，如果你测试了它并和你一起工作，因为我把它复制过去了。
你的控制台有什么错误吗？
在这里工作：jsfiddle.net/c0e5ez9m/2
好的，所以它在代码片段上工作，但是我复制代码的问题，它在我的浏览器中根本不起作用，mm，让我再检查一次
谢谢你的解释，我很感激，谢谢你的一切=）