Javascript 如何在导航栏菜单中实现平滑的向下滑动效果

目标-我想在滚动一段时间后实现向下滑动（用于导航栏）的效果。我实际上实现了我想要的，但我遇到了一个问题

问题-当滚动到顶部时，导航栏会变得粘乎乎的，没有任何效果，而且它有点像是被吸引住了。有人能帮我修一下吗

你可以在这里看到我的代码

//粘性头
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>100）{
$（'#header'）.addClass（'sticky-header'）；
$（'#header.mo row'）.removeClass（'sticky-border'）；
}否则{
$（'#header'）.removeClass（'sticky-header'）；
$（'#header.mo行'）.addClass（'sticky-border'）；
}
});
var sidebarBox=document.querySelector（“#box”）；
var sidebarBtn=document.querySelector（“#btn”）；
var pageWrapper=document.querySelector（“#主内容”）；
sidebarBtn.addEventListener（'click'，函数（事件）{
if（this.classList.contains（'active'））{
this.classList.remove（'active'）；
sidebarBox.classList.remove（'active'）；
}否则{
this.classList.add（'active'）；
sidebarBox.classList.add（'active'）；
}
});
//手风琴js
$（文档）.ready（函数（）{
功能关闭\u手风琴\u节（）{
$（'.accordion.accordion节标题'）.removeClass（'active2'）；
$（'.accordion.accordion section content'）.slideUp（300）.removeClass（'open'）；
}
$（“.手风琴节标题”）。单击（函数（e）{
//抓取当前锚定值
var currentAttrValue=$（this.attr（'href'）；
if（$（e.target）.is（'.active2'））{
关闭“手风琴”部分（）；
}否则{
关闭“手风琴”部分（）；
//将活动类添加到节标题
$（this.addClass（'active2'）；
//打开隐藏的内容面板
$（'.accordion'+currentAttrValue）.slideDown（300）.addClass（'open'）；
}
e、 预防默认值（）；
});
});
html{
框大小：边框框；
}
身体{
保证金：0；
高度：1000px；
-webkit字体平滑：抗锯齿；
字体系列：“Lato”，无衬线；
}
*,
*：之前，
*：之后{
框大小：继承；
}
李先生{
保证金：0；
填充：0；
列表样式：无；
}
img{
垂直对齐：中间对齐；
}
a{
文字装饰：无；
}
.mo集装箱{
宽度：100%；
最大宽度：1250px；
保证金：0自动；
z指数：999；
位置：相对位置；
}
莫罗先生{
宽度：95%；
保证金：0自动；
}
.mo网格：之前，
.mo网格：之后，
莫罗：以前，
莫罗：之后{
内容：“；
显示：表格；
}
.mo网格：之后，
莫罗：之后{
明确：两者皆有；
}
[类别*=“列-”]{
宽度：100%；
浮动：左；
最小高度：1px；
}
上校{
利润率：10px；
}
@媒体屏幕和屏幕（最小宽度：320px）{
.col-sm-1{
宽度：8.33333%；
}
.col-sm-2{
宽度：16.66667%；
}
.col-sm-3{
宽度：25%；
}
.col-sm-4{
宽度：33.33333%；
}
.col-sm-5{
宽度：41.66667%；
}
.col-sm-6{
宽度：50%；
}
.col-sm-7{
宽度：58.33333%；
}
.col-sm-8{
宽度：66.667%；
}
.col-sm-9{
宽度：75%；
}
.col-sm-10{
宽度：83.33333%；
}
col-sm-11{
宽度：91.66667%；
}
col-sm-12{
宽度：100%；
}
}
@媒体屏幕和屏幕（最小宽度：768px）{
.col-md-1{
宽度：8.33333%；
}
.col-md-2{
宽度：16.66667%；
}
.col-md-3{
宽度：25%；
}
.col-md-4{
宽度：33.33333%；
}
.col-md-5{
宽度：41.66667%；
}
.col-md-6{
宽度：50%；
}
.col-md-7{
宽度：58.33333%；
}
.col-md-8{
宽度：66.667%；
}
.col-md-9{
宽度：75%；
}
.col-md-10{
宽度：83.33333%；
}
.col-md-11{
宽度：91.66667%；
}
.col-md-12{
宽度：100%；
}
}
@媒体屏幕和屏幕（最小宽度：992px）{
.col-lg-1{
宽度：8.33333%；
}
.col-lg-2{
宽度：16.66667%；
}
.col-lg-3{
宽度：25%；
}
.col-lg-4{
宽度：33.33333%；
}
.col-lg-5{
宽度：41.66667%；
}
.col-lg-6{
宽度：50%；
}
.col-lg-7{
宽度：58.33333%；
}
.col-lg-8{
宽度：66.667%；
}
.col-lg-9{
宽度：75%；
}
.col-lg-10{
宽度：83.33333%；
}
.col-lg-11{
宽度：91.66667%；
}
.col-lg-12{
宽度：100%；
}
}
.你好，酒吧{
高度：40px；
线高：39px；
背景#52ae56；
文本对齐：居中；
颜色：#fff；
}
.你好，酒吧a{
颜色：#fff；
文本转换：大写；
字体大小：12px；
}
.你好，酒吧{
字体大小：粗体；
}
.粘头{
背景色：#fff！重要；
盒影：02px4p0RGBA（87,71,81,0.2）；
高度：65px；
线高：65px；
位置：固定！重要；
排名：0；
-webkit动画名称：slidedown；
动画名称：slidedown；
-webkit动画持续时间：.5s；
动画持续时间：.5s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
@-webkit关键帧向下滑动{
0% {
不透明度：0；
-webkit转换：translateY（-400px）；
转换：translateY（-400px）；
}
100% {
-webkit转换：translateY（0）；
变换：translateY（0）；
}
}
@关键帧向下滑动{
0% {
-webkit转换：translateY（-400px）；
-ms变换：translateY（-400px）；
转换：translateY（-400px）；
}
100% {
-webkit转换：translateY（0）；
-ms变换：translateY（0）；
变换：translateY（0）；
}
}
.粘性边界{
边框底部：1px实心#e8e8e8；
}
#标题秒{
位置：相对位置；
z指数：999999；
高度：65px；
线高：65px；
/*折叠*/
/*手风琴*/
}
#收割台第二节#收割台{
背景色：透明；
宽度：100%；
高度：66px；
线高：64px；
位置：绝对位置；
}
#标题部分#标题。导航栏标志{
高度：65px；
线高：65px；
光标：指针；
}
#标题部分#标题。导航栏标志img{
身高：75便士
 // Sticky Header
 jQuery(window).scroll(function() {    
     var scroll = jQuery(window).scrollTop();
     if (scroll > 200) {
         jQuery("#header").addClass("show");
     } else {
         jQuery("#header").removeClass("show");
     }
 });

 var lastScrollTop = 0;
 jQuery(window).scroll(function(event){
 var st = jQuery(this).scrollTop();
    if (st > lastScrollTop){
        jQuery("#header").removeClass("up");
    } else {
       jQuery("#header").addClass("up");
    }
    lastScrollTop = st;
 });

    #header-sec #header,
    #header-sec #header.up{
          position: absolute;
          top: 0;
          -webkit-transition: top 500ms ease-out ;
           -moz-transition: top 500ms ease-out ;
           -o-transition: top 500ms ease-out ;
           transition: top 500ms ease-out ;
    }
    #header-sec #header.show {
     position: fixed !important;
      top: 0;
      -webkit-animation-name: slidedown;
      animation-name: slidedown;
      -webkit-animation-duration: .5s;
      animation-duration: .5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    #header-sec #header.up.show {
         position: fixed !important;
         top: 0;
        -webkit-animation-name: slideup;
        animation-name: slideup;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
       -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
    }
    @-webkit-keyframes slideup {
      0% {
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-400px);
        transform: translateY(-400px);
      }
    }
    @keyframes slideup {
      0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
     }
      100% {
        -webkit-transform: translateY(-400px);
       -ms-transform: translateY(-400px);
        transform: translateY(-400px);
      }
    }