粘性导航栏-不起作用

Question

Question

I want the navBar to stick conditionally on scroll. However there are bugs I can not quite diagnose, as I am new to jQuery. What is preventing the nav bar from sticking conditionally on scroll?

The jQuery in the jsfiddle below will not run correctly, and after trying for awhile to make it work, I cannot seem to make it run. I've looked at other examples of this but I'd rather not change the jQuery entirely until I know the reason that my code does not work. I will not link the HTML as it full of Lorem Ipsum test text body. It is found in the JSFiddle link.

What is the error in the javascript that isn't making the navBar apply the sticky class?

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

You have some bugs in your js code. Firstly, .nav should be nav since your <nav> element has a class of navigation . So, we'll grab it by the tag name instead. Secondly, .addClass() and .removeClass() don't need the period before the class name.

Here's the updated 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();
});

Here's an updated fiddle .

Answer 2

first of all you are adding/removing classes wrongly with jquery should be

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

same with nav selection, there were some other small css problems too

here is working jsfiddle