滚动后修复了导航栏

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选择器时，id和类必须以#或a为前缀. 分别。 在您的CSS中

nav { // rules }

fixed { // rules }

home { // rules }

什么时候应该有

#nav { // rules }

.fixed { // rules }

#home { // rules }

这是您代码工作的小提琴。