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）但不确定如何将其集成到我的代码中。

基本上，当用户位于顶部时，我希望导航（导航）在页面上显示较低，当用户向上滚动时，我希望导航（导航）位于页面下方，我希望它位于顶部。

Answer 1

添加javascript的条件 if（st == 300）{$（＆＃34;＃screen-nav＆＃34;）。css（{top：＆＃39; 50px＆＃39;}）; }

<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>

应用第三个条件来运作

1 个答案: