如何製作粘滯導航欄？

這是我的代碼，希望你們幫助我。如何製作粘滯導航欄？

我試圖創建一個導航欄，它粘在頁面頂部，並在用戶向下滾動時移動。

<!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; 
 
\t 
 
\t 
 
} 
 

 
li { 
 
    float: left; 
 
    border-right:1px solid #bbb; 
 
} 
 

 
li.logo{ 
 
    border-right: none; 
 
\t font-family:Impact, Charcoal, sans-serif; 
 
\t color:white; 
 
\t font-size:40px; 
 
\t margin-top: 15px; 
 
\t padding-left:30px; 
 
\t } 
 

 

 
li:last-child { 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 25px 30px; 
 
    text-decoration: none; 
 
\t font-size:20px; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
} 
 

 
    
 

 
    
 
#section { 
 
    width:350px; 
 
    float:center; 
 
    padding:10px; \t \t 
 
} 
 
#footer { 
 
    background-image : url("pic17.jpg"); 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:100px; \t \t 
 
} 
 

 
#header{ 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    } 
 

 
    
 

 
</style> 
 

 
\t 
 

 
</head> 
 

 

 
<body> 
 

 
     <header> 
 
      <h1>New Technology Planet</h1> 
 
\t \t \t <p><h3>The WebSite Is Still Under Construction By Laith SJ</h3></p> 
 
\t \t \t <p>Teamspeak3 & WebSites Hosting</p> 
 
      <p>Our goal is to give you the best what we can do!</p> 
 
     </header> 
 

 

 

 

 
\t \t 
 
\t \t 
 
\t \t 
 
      
 
       <!-- Navagator start --> 
 

 
\t \t \t <nav role='navigation'> 
 
        <ul> 
 
         <li class="logo">NewTecPlanet</li>       
 
         <ul style="float:right;list-style-type:none;"> 
 
\t \t \t \t \t   <li><a class="active" href="#home">Home</a></li> 
 
          <li><a href="#news">News|Updates</a></li> 
 
          <li><a href="#contact">Products</a></li> 
 
\t \t \t \t \t   <li><a href="#login">SignUp | Login</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#about">About US</a></li> 
 
          <li><a href="#about">Contact Us</a></li> 
 
          
 
         </ul> 
 
        </ul> 
 
\t \t \t \t </nav> 
 
\t \t \t <!-- navagattor end code --> 
 

 
<!-- --> 
 

 
     
 
\t \t 
 
\t \t 
 
     <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> 
 

 
     
 
\t <!-- last part of the page --> 
 
\t 
 
\t <div id="footer"> 
 
     New Technology Planet 
 
     </div> 
 
\t 
 
\t 
 
</body> 
 
</html>

傢伙歡迎，如果你認爲有什麼好將有助於觀衆，並希望如果你可以編輯代碼，以便它可以工作的很好的編輯的訊息。

如果你需要一個關於什麼即時通知讓我知道的例子，我不想發佈其他網站，所以我不打破任何規則。

謝謝

來源

2016-01-27 Porg - Laith SJ

'位置：fixed'固定的元件到視而不是該文檔。 – GolezTrol

我假設你的意思是，當窗口頂部通過導航欄時是棍棒並保持可見？ - 可能重複的http://stackoverflow.com/questions/28452235/make-a-nav-bar-stick-to-the-top-when-scrolling-with-css –

是啊這就是我的意思，當用戶向上滾動導航欄將返回到原來的位置。我厭倦了看到你排隊的頁面，但我什麼都聽不懂，我試圖測試它，但它沒有奏效。並且我可以鏈接一個示例以瞭解我所要求的內容？ –

創建一個類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>

來源

2016-01-27 21:47:42

我試過了，但沒有奏效，如果你測試了它並和你一起工作，因爲我把它複製過去了。 –

你的控制檯有任何錯誤嗎？ –

在這裏工作：https：//jsfiddle.net/c0e5ez9m/2/ –

如何製作粘滯導航欄？

回答

相關問題