Scrolltop不断跳跃 - 平滑过渡

Question

我这样做是为了确保我的顶部标题保持在顶部。

$(window).scroll(function () {                
    if ($(window).scrollTop() > 0) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 1) {

      $('#nav_bar').removeClass('navbar-fixed');
    }
  });

.navbar-fixed {
    top: 5;
    z-index: 100;
    position: fixed;
    width: 100%;
    background-color: #ffffff !important; 
}

导航栏现已修复。但当我接近顶部时，它跳到顶部几个像素，但我正在寻找一个平滑的过渡。任何人都可以指导如何实现这一目标吗？

Answer 1

在滚动期间，您需要计算导航栏与视口顶部之间的距离：

var navbarOff = $('#nav_bar').offset().top
$(window).scroll(function () {                 
  var scrollTop = $(window).scrollTop();
  var distance = scrollTop - navbarOff;
    if (distance >= 0) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if (scrollTop < navbarOff){
      $('#nav_bar').removeClass('navbar-fixed');
    }
});

body{
    margin:0px;
}

.viewport{
    height:200vh;
}

.spacer{
    height:100px;
}

#nav_bar{
    background:black;
    height:20px;
}
.navbar-fixed {
    top: 0px;
    left: 0px;
    z-index: 100;
    position: fixed;
    width: 100%;
    background-color: black !important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="viewport">
   <div class="spacer">
   </div>
   <div id="nav_bar">
   </div>
</div>