Javascript Scrolltop保持跳跃-平滑过渡

我这样做是为了确保我的头球保持在顶部

$(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; 
}

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>0）{
$（'nav#u bar'）.addClass（'navbar-fixed'）；
}
如果（$（窗口）.scrollTop（）<1）{
$（'nav#u bar'）。removeClass（'navbar-fixed'）；
}
});
.导航条固定{
排名前5名；
z指数：100；
位置：固定；
宽度：100%；
背景色：#ffffff！重要；
}

---

导航栏现在已修复。但当我接近顶部时，它会跳到顶部几个像素，但我正在寻找一个平滑的过渡。有人可以指导如何完成此操作吗？

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

var navbarOff=$（'#导航条'）.offset（）.top
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
var距离=滚动顶部-导航巴罗夫；
如果（距离>=0）{
$（'nav#u bar'）.addClass（'navbar-fixed'）；
}
如果（滚动顶部
正文{
边际：0px；
}
.视口{
高度：200vh；
}
.垫片{
高度：100px；
}
#导航栏{
背景：黑色；
高度：20px；
}
.导航条固定{
顶部：0px；
左：0px；
z指数：100；
位置：固定；
宽度：100%；
背景色：黑色！重要；
}

在哪个浏览器中可以看到此内容？我创造了这个小提琴，它在Chrome和Firefox中看起来很好。你必须用标题显示最少的代码，因为在发布代码的测试中效果很好。在Chrome中，我有一个横幅图像，下面显示内容OK，但是导航栏的原始
top
值是多少？