粘性导航显示与JQuery幻灯片缓慢下降

Sticky Navigation Show with JQuery slideDown Slowly

本文关键字：幻灯片缓慢 JQuery 导航显示更新时间：2023-09-26

.JS文件的代码

 $(document).scroll(function (){
        var menuheight= $('header').height();
        var y = $(this).scrollTop();
      if (y>(menuheight))
       {
              $('.menu_nav_features').addClass('sticky');
       }
      else{
              $('.menu_nav_features').removeClass('sticky');
       }
 });

向下

滚动特定高度文件时要添加的.css class代码

 .sticky{
   position: fixed;
   top: 0;
  }

这是我Navigation Bar.less文件的代码。（供参考）

   .menu_nav_features{
       width: 100%;
       height: 46px !important;
       border-bottom: 1px solid #e6e6e6;
       border-top: 1px solid #e6e6e6;
    .menu-features{
        margin-top: 0px;
        width: 1200px !important;
        list-style:none;
        margin-left: -35px;
        li{
            display: inline;
            .transition;
            a{  
                background: #f4f4f4;
                margin-right:-3px;
                display: inline-block;
                text-decoration: none;
                color:#444444;
                padding:0px 30px;
                line-height: 44px;
                .transition;
            }
            a:active, a:hover{
                color: #000;
                background: #fdfdfd;
            }
        }
        li:nth-child(2):hover .bf{
            .displayall;
            .transition;
        }
        .bf{
            display: none;
            position: absolute;
            margin-left: 134px;
            padding-top: 7px;
            // top: 50px;
            .bf_btns{
                a{
                    display: block;
                    width: 238px !important;
                }
                a:last-child{
                    margin-top: 0px;
                }
            }
        }
    }
 }

问题陈述：当滚动条高度大于我的Header高度时，我的导航栏修复了Sticky class的原因。它立即显示，我想慢慢向下显示它或类似 slideDown JQuery.我tranistion添加到Sticky类，但没有任何反应。

你可以简单地用css解决这个问题

@keyframes scroll-down {
  from {transform: translate(0,100%)}
  to {transfrom: translate(0,0)}
}
.sticky {
  position: fixed;
  top:0;
  animation-name: scroll-down;
  animation-duration: 0.4s;
}