javascript - 应用第三个条件来运行

Question

我有以下功能，当用户向上滚动时将 css 应用到#screen-nav，当用户向下滚动时应用不同的 css

jQuery(document).ready(function($){
 var didScroll;
 var lastScrollTop = 0;
 var delta = 5;
 var navbarHeight = $('nav').outerHeight(true);

$(window).scroll(function(event) { didScroll = true; });

 setInterval(function() {
   if (didScroll) {
    hasScrolled();
   didScroll = false;
 }
 }, 0);

function hasScrolled() {
  if($( window ).width() > 768) {
   var st = $(this).scrollTop();
  if (Math.abs(lastScrollTop - st) <= delta)
   return;
  if (st > lastScrollTop) {
    // Scroll Down
        $('#screen-nav').removeClass('nav-down').addClass('nav-up');
   } else { 
        $('#screen-nav').removeClass('nav-up').addClass('nav-down');
   }  

 }
   lastScrollTop = st;
 }

});

CSS

 #screen-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
}

#screen-nav.nav-up { top: -100px; }
#screen-nav.nav-down { top: 0; }

我想添加第三个类。我想要#screen-nav { top: 50px; } 当用户距离顶部 300px 时。 (所以我想当用户处于那个位置时应用第三类 .nav-top)但不确定如何将它集成到我的代码中。

基本上，当用户位于顶部时，我希望 nav(导航)在页面上显示得较低，而当用户向上滚动时它下降，我希望它位于顶部。

Answer 1

添加javascript条件if(st == 300){ $("#screen-nav").css({ top: '50px' }); }

<script type="text/javascript">
    jQuery(document).ready(function($){
     var didScroll;
     var lastScrollTop = 0;
     var delta = 5;
     var navbarHeight = $('nav').outerHeight(true);

    $(window).scroll(function(event) { didScroll = true; });

     setInterval(function() {
       if (didScroll) {
        hasScrolled();
       didScroll = false;
     }
     }, 0);

    function hasScrolled() {
      if($( window ).width() > 768) {
       var st = $(this).scrollTop();
      if (Math.abs(lastScrollTop - st) <= delta)
       return;

       if(st == 300)
       {
             $("#screen-nav").css({ top: '50px' });
       }
       else if (st > lastScrollTop) {
            // Scroll Down
            $('#screen-nav').removeClass('nav-down').addClass('nav-up');
       }
       else { 
            $('#screen-nav').removeClass('nav-up').addClass('nav-down');
       }  

     }
       lastScrollTop = st;
     }

    });
    </script>