javascript - 到达特定部分的底部时如何将位置静态更改为固定

我刚开始学习jQuery和JS，现在在制作一些基本内容方面遇到困难。

我想使静态导航栏在窗口到达.hero-fullscreen部分的末尾时变得固定，如果没有，则返回静态。

$(window).on("scroll", function() {

  var navbar = $(".navbar");
  if (navbar.offset().top > 150) {
    navbar.addClass(".navbar-fixed");
  } else {
    navbar.removeClass(".navbar-fixed");
  }

});

.navbar {
  display: block;
  height: 50px;
  width: 100%;
  background-color: #000;
}

.navbar-static {
  position: static;
}

.navbar-fixed {
  position: fixed;
}

.hero-fullscreen {
  height: 100vh;
  width: 100%;
  background-color: red;
}

.random-section {
  height: 100vh;
  width: 100%;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-static"></nav>
<section class="hero-fullscreen bg-image"></section>
<section class="random-section"></section>

现在，我的问题是，代替.top > 150，应该存在什么，以便当navbar到达.hero-fullscreen（红色的）部分的底部时变为固定状态？

谢谢！

最佳答案

基本上，您需要做两件事：


找出视口的高度
始终跟踪哪里
滚动条是


像这样

    window.addEventListener('load', getWindowHeight);
    window.addEventListener('resize', getWindowHeight);

    var endPos;

    function getWindowHeight(){
      var hei = window.innerHeight;
      endPos = hei + 50;
    }

    document.addEventListener('scroll', trackScroll);

    var navBar = document.getElementById('navbar');

    function trackScroll() {
      var scrollPos = document.body.scrollTop();
      if (scrollPos > endPos) {
        navBar.style.position = 'fixed';
      } else {
        navBar.style.position = 'static';
      }
    }

但是，我这样做了，因此您必须为导航元素提供id的navbar，而不是class。


getWindowHeight满足第一个要求。
trackScroll满足第二个要求并进行必要的更改。