粘性导航：无法弄清楚为什么 removeClass 在 scrollTop 小于我的导航的 offset().top 时不起作用

Question

我似乎无法弄清楚为什么当我的scrollTop小于或不等于我的导航的offset((.top值时removeClass不起作用：

$(document).ready(function(){
    $(window).scroll(function(){
        var scrollPos = $(window).scrollTop();
        var targetPos = $("nav").offset().top;    
        console.log(scrollPos);    
        if ( scrollPos >= targetPos ) {
           $("nav").addClass("fixed-nav");
        } else {
           $("nav").removeClass("fixed-nav");
        }
   });
});

https://codepen.io/alexyap/pen/EmOPpd ->笔到我的尝试

Answer 1

> 在元素nav的window.scroll期间不要获取offset().top值，而是在document.ready上获取该值并尝试，

$(document).ready(function(){
  var targetPos = $("nav").offset().top;
  $(window).scroll(function(){
    var scrollPos = $(window).scrollTop();
    if ( scrollPos >= targetPos ) {
      $("nav").addClass("fixed-nav");
    } else {
      $("nav").removeClass("fixed-nav");
    }   
  });
});

* {
  margin: 0;
  padding: 0;
}
body {
  height: 3000px;
}
header {
  height: 100vh;
  width: 100%;
  position: relative;
  background: red;
}
nav {
  width: 100%;
  height: 80px;
  background: black;
  position: absolute;
  bottom: 0;
}
nav ul {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
nav ul li {
  list-style: none;
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  font-size: 24px;
  color: #fafafa;
  line-height: 80px;
  padding: 0 10px;
}
.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
  <ul>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
  </ul>
</nav>
</header>

Answer 2

这是因为您的nav元素可能位于页面的 0 位置。>=运算符将始终返回true 。仅使用 > .