應用第三條件起作用

我有以下功能，其appliess CSS來＃屏幕-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（導航）在頁面上顯示得更低，當用戶在頂部時，並且當用戶向上滾動時它下降，我希望它在頂部正確。

來源

2017-07-07 user3550879

您可能要檢查skrollr（不只是視差）： https://github.com/Prinzhorn/skrollr –

什麼是第三類的條件是什麼？距離文檔頂部300像素以內？ – Lewk

就是這樣！我只是希望當用戶距離頂部300像素以內時，導航功能會更低。我嘗試過的所有內容都被覆蓋或者有時不會顯示;當用戶滾動時t不起作用 – user3550879

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

來源

2017-07-07 14:14:35

頂部：50px不會被'.nav-down'推翻，因爲它們可能同時發生。同樣，我可能沒有正確說明，但如果用戶距離頂部不超過300像素或更少，我想添加它。 – user3550879

應用第三條件起作用

回答

相關問題