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

Question

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

$(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 元素可能位于页面的 0 位置。 >= 运算符将始终 return true。仅使用 >.

Answer 2

不要在 window.scroll 期间获取元素 nav 的 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>

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

Sticky nav: Can't figure out why removeClass doesn't work when scrollTop is less than my nav's offset().top

css

jquery

sticky

nav