粘性导航栏-不起作用

Question

题

我希望navBar有条件地坚持滚动。 但是，有些错误我无法完全诊断，因为我是jQuery新手。 是什么阻止导航栏有条件地粘在滚动条上？

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

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

Java脚本

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();
});

这是最新的小提琴 。

Answer 2

首先，您使用jquery错误地添加/删除了类

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

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

这是工作jsfiddle