问题

Question

问题

我希望导航栏有条不紊地滚动。然而，有些错误我无法完全诊断，因为我是jQuery的新手。是什么阻止导航条有条不紊地滚动？

下面的jsfiddle中的jQuery将无法正常运行，并且在尝试了一段时间后使其工作，我似乎无法让它运行。我已经看过其他的例子，但我不想完全改变jQuery，直到我知道我的代码不起作用的原因。我不会链接HTML，因为它充满了Lorem Ipsum测试文本正文。它可以在JSFiddle链接中找到。

javascript中没有使navBar应用粘性类的错误是什么？

的Javascript

var navTop = $(".nav").offset().top;

var stickyNav = function(){
  if ($(window).scrollTop() >= navTop){
    $(".nav").addClass(".sticky")
  } else {
    $(".nav").removeClass(".sticky")
  }
};

stickyNav();

$(window).scroll(function(){
    stickyNav();
};

CSS

* {
  margin: 0;
  box-sizing: border-box;
}

.mainHeader {
  width: 100%;
  height: 20%;
  background-color: rgb(62, 65, 66);
  text-align: center;
  font-family: "Helvetica Nue";
}

.navigation {
  width 100%;
  height 10%;
  background-color: rgb(89, 127, 143);
  position: relative;
}

.sticky {
  position: fixed;
}

https://jsfiddle.net/11u1bj5j/

Answer 1

你的js代码中有一些错误。首先，.nav应为nav，因为您的<nav>元素的类别为navigation。因此，我们将通过标记名称来获取它。其次，.addClass()和.removeClass()不需要课程名称之前的句号。

这是更新的javascript：

var navTop = $("nav").offset().top;

var stickyNav = function(){
    if ($(window).scrollTop() >= navTop){
        $("nav").addClass("sticky");
    } else {
        $("nav").removeClass("sticky");
    }
};

stickyNav();

$(window).scroll(function(){
    stickyNav();
});

这是一个更新的fiddle。

Answer 2

首先你要用jquery错误地添加/删除类

.addClass("sticky") / .removeClass("sticky")

与nav选择相同，还有其他一些小的CSS问题

这里是working jsfiddle

粘滞导航栏 - 无法正常工作

问题

的Javascript

CSS

2 个答案: