Исправлена ​​панель навигации после прокрутки

Question

Я пытаюсь создать панель навигации, которая остается фиксированной только после того, как она достигла вершины страницы. У меня есть код, который работает так, что навигатор исправлен, но я не могу заставить его прокручивать вверх.

Вот 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'); 
    } 
}); 

Они были основаны от ответов на подобные вопросы на этом сайте, но пока ничего не работает. Кто-нибудь знает, что не так с моим кодом?

Answer 1

При написании селектора CSS идентификаторы и классы должны быть предварительно префиксны с помощью # или . соответственно. В вашем CSS у вас есть

nav { // rules } 

fixed { // rules } 

home { // rules } 

Когда вы должны иметь

#nav { // rules } 

.fixed { // rules } 

#home { // rules } 

Вот скрипку из your code работы.