滾動後固定的導航欄

我正在嘗試創建一個導航欄，它只有在到達頁面頂部後纔會保持固定。我有代碼工作，以便導航是固定的，但我似乎無法讓它滾動到頂部第一。滾動後固定的導航欄

這裏的HTML：

<div id= "home"> contentcontentcontent </div> 
<div id="nav"> 
    <a href="#home">home</a> 
    <a href="#gogreen">go green</a> 
    <a href="#yourarea">your area</a> 
    <a href="#howto">how to</a></div>

而CSS：

nav { 
text-align: center; 
top: 600; 
z-index: 100; 
position: fixed; 
width: 100%; 
border: 0; 
margin-bottom: 0;} 

fixed { 
top:600; 
z-index: 100; 
position: fixed; 
width: 100%;} 

home { 
overflow: hidden;}

而jQuery的：

$(document).ready(function() { 
$(window).scroll(function() { 
    //console log determines when nav is fixed 
    console.log($(window).scrollTop()) 
    if ($(window).scrollTop() > 600) { 
     $('#nav').addClass('fixed'); 
    } 
    if ($(window).scrollTop() < 601) { 
     $('#nav').removeClass('fixed'); 
    } 
});

這些都是基於關閉的在該網站上類似的問題的回答，但到目前爲止似乎沒有任何工作。有人知道我的代碼有什麼問題嗎？

來源

2014-01-15 user3198201

歡迎使用stackoverflow！爲了獲得有關問題的幫助，除了（或經常代替）像'scrolling'這樣的標籤之外，通常應該包含語言，框架和上下文的標籤。這是因爲用戶更可能訂閱像'javascript'這樣的標籤，這使得您更有可能獲得答案。 – Ziggy

在編寫CSS選擇器時，ID和類別需要分別加上#或.作爲前綴。在你的CSS你有

nav { // rules } 

fixed { // rules } 

home { // rules }

當你應該有

#nav { // rules } 

.fixed { // rules } 

#home { // rules }

這裏是your code工作的小提琴。

來源

2014-01-15 14:10:33 Ziggy

滾動後固定的導航欄

回答

相關問題