javascript - 粘性导航栏 - 不起作用

Question

问题

我希望导航栏有条件地固定在滚动条上。但是，由于我是 jQuery 的新手，所以有些错误我无法完全诊断出来。是什么阻止导航栏有条件地粘在滚动条上？

下面 jsfiddle 中的 jQuery 将无法正常运行，在尝试了一段时间后，我似乎无法让它运行。我已经查看了其他示例，但我宁愿不完全更改 jQuery，直到我知道我的代码不起作用的原因。我不会链接 HTML，因为它充满了 Lorem Ipsum 测试文本正文。它位于 JSFiddle 链接中。

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

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 .