代碼應用在頁面頂部與滾動

我試圖添加條件語句到我的代碼，但似乎無法讓它工作。當用戶位於屏幕頂部時，我想將.nav-down-top應用於＃s-nav，當不在頁面頂部時，將.nav-down應用於＃s-nav。代碼應用在頁面頂部與滾動

代碼

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

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

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

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

    if (st > lastScrollTop && st > navbarHeight) { 

     // Scroll Down 
     $('#s-nav').removeClass('nav-down').addClass('nav-up'); 

    } else { 



    // !!!! Code issue 

     // Scroll Up (@ top of screen) 
     if ($(window).scrollTop() === 0) { 
      $('#s-nav').removeClass('nav-up').addClass('nav-down-top'); 

     } else { 

     // Scroll Up (NOT @ top of screen) 
     if (st + $(window).height() < $(document).height()) { 
      $('#s-nav').removeClass('nav-up').addClass('nav-down'); 

    } 

    // 


} else { 
    $('#s-nav').removeClass('nav-up').addClass('nav-down'); 
} 
lastScrollTop = st; 
} 
});

HTML

<nav id="s-nav" class="nav-down"> ...

來源

2017-05-25 user3550879

按F12打開開發者工具，檢查控制檯。你有幾個js錯誤。 – gaynorvader

？代碼的作品，當我只包括其中一個向上滾動如果stateents但不是2.（我知道我錯過了其他語句之間，但不知道是否是正確的方法，當試圖添加2） – user3550879

你能解釋一下你正在努力完成？我認爲你的代碼可能不工作的原因至少有一部分是你添加了3個類，但只有一個被刪除。 – gaynorvader

因此，正如我說的，你沒有刪除未使用的兩個類和你同你的代碼有一些問題（缺少右尖括號，孤兒else語句）。工作職能應該是這樣的：

function hasScrolled() { 
if($(window).width() > 768) { 
    var st = $(this).scrollTop(); 
    if (Math.abs(lastScrollTop - st) <= delta) 
     return; 
    if (st > lastScrollTop && st > navbarHeight) { 
     // Scroll Down 
     $('#s-nav').removeClass('up').removeClass('top').addClass('down'); 
    } else { 
     // Scroll Up (@ top of screen) 
     if (st === 0) { 
      $('#s-nav').removeClass('up').removeClass('down').addClass('top'); 
     } else {//if (st + $(window).height() < $(document).height()) { 
      $('#s-nav').removeClass('down').removeClass('top').addClass('up'); 
     } 
    } 
} 
lastScrollTop = st; 
}

小提琴：https://jsfiddle.net/wm6kvm6u/

來源

2017-05-28 09:12:29 gaynorvader

但我讚揚你，我更接近我的目標。當用戶滾動到頂部時，我遇到的問題仍然是衝突。當它們不在屏幕的頂部（向下滾動）時，它將刪除導航下方的頂部並放置導航下來，以便導航在跳出屏幕之前進行「跳轉」到另一個類。我希望平穩過渡，但我想這需要更復雜的功能。您提供的代碼在我看到 – user3550879

時似乎也沒有正確顯示動畫，但當用戶向上滾動時，似乎並不總是應用「屏幕頂部」功能。有時候，nav-down-top不會被添加。（或在您的代碼示例'頂部'）我不確定是否需要代碼來連續監視位置或其他東西 – user3550879

所以，當用戶向下滾動而不是向上滾動時，您希望導航消失？ https://jsfiddle.net/wm6kvm6u/3/ – gaynorvader

代碼應用在頁面頂部與滾動

回答

相關問題