像这样

Question

我刚刚开始学习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（红色的）部分的底部时变得固定？< / p>

谢谢！

Answer 1

基本上你需要做两件事：

找出视口的高度
始终跟踪地点滚动条是

像这样

    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满足第二个要求并进行必要的更改。

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

1 个答案:

像这样