当到达英雄部分的底部时，将静态导航栏更改为固定在滚动上

Question

当到达特定部分的末尾时，如何使静态定位导航栏固定？

Fiddle

$(document).on("scroll", function() {
    var navbar = $(".static-navbar");
    navbar.addClass("fixed-navbar");
})

我试图让导航栏立即变为固定状态＆＃34;红色部分＆＃34;到了。
使用上面的这个jQuery代码，我设法在滚动事件被触发后立即修复它，但这不是我正在寻找的。

Answer 1

修改

我添加了slideDown功能，如评论中所述......
它看起来很棒！

关于此添加的两件事要说：

1. .slideDown()旨在为隐藏元素设置动画 所以在你的情况下，你必须先隐藏它。
2. 然后，需要一个“旗帜”以避免它被动画太多次......
   scroll事件像AK47一样被射击！ ;）
3. 关于slideUp()，您必须等待动画结束才能删除修复它的类，然后确保它不被隐藏。所以你在slideUp()回调中执行此操作。





<小时/>

我想你想要这个片段中的内容。

您只需要使用.scrollTop()比较.fullscreen height值来比较滚动的像素数。


然后很容易将导航栏设置为固定或静态。

// Navigation state "flag"
var isFixed=false;

$(document).on("scroll", function() {
  var navbar = $(".static-navbar");
  var heroSectionHeight=$(".fullscreen").height();

  // Set fixed
  if( $(window).scrollTop()>=heroSectionHeight && !isFixed ){
    isFixed=true;
    navbar.hide().addClass("fixed-navbar").slideDown(600);
  }

  // Set static
  if( $(window).scrollTop()<heroSectionHeight && isFixed ){
    isFixed=false;
    navbar.slideUp(600,function(){
      navbar.removeClass("fixed-navbar").show();
    });
  }
});

body {
  margin: 0;
}
.fullscreen {
  width: 100%;
  height: 100vh;
  background-color: #000;
  color: #fff;
  text-align: center;
}
.bg-red {
  background-color: red;
}
.static-navbar {
  width: 100%;
  position: static;
  padding: 25px 0;
  background-color: rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.fixed-navbar {
  position: fixed;
  background-color: rgba(255, 255, 255, 1);
  color: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


<div class="fullscreen">
  <nav class="static-navbar">
    Static Navbar
  </nav>
  <div style="padding-top: 280px;">HERO SECTION</div>
</div>

<div class="fullscreen bg-red" style="padding-top: 50px; padding-bottom: 50px;">
  <div style="padding-top: 280px;">RED SECTION</div>
</div>

在整页模式下可以更好地看到此代码段
（否则，高度太小而且会闪烁）