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和类需要分别以#或.作为前缀。你的CSS中有

nav { // rules }

fixed { // rules }

home { // rules }

什么时候应该

#nav { // rules }

.fixed { // rules }

#home { // rules }

这是your code工作的小提琴。

滚动后固定导航栏

1 个答案: