代碼在Safari和響應式瀏覽器中無法正常工作

我有下面的代碼，它將屏幕上方的「顯示/隱藏」我的導航，然後再次將其關閉。代碼在Safari和響應式瀏覽器中無法正常工作

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

的問題是，在Safari瀏覽器，並且當有時.nav式類被添加從移動尺寸（< 768px所有的瀏覽器），以畫面尺寸畫面改變並且導航不顯示。但只有當用戶滾動到頁面的頂部。

不知道是否有更好的方法來編寫代碼以確保正確的功能。

來源

2017-08-17 user3550879

你能提供一個小提琴嗎？ – hallleron

不太熟悉小提琴（永遠不能得到外部java工作），但繼承人我得到了什麼https://jsfiddle.net/ke6fwpL1/#&togetherjs=7lBzxRlipr – user3550879

儘管提到了兩個問題，代碼的工作原理就像我想要的那樣。我想我正在爲這些問題尋找故障保險箱 – user3550879

我看你使用的是this的例子。他的小提琴也運作得很好。唯一的事情就是在瀏覽器上重新調整顯示導航的位置。你應該能夠單獨添加。

$(window).resize(function(){ 
    $('#screen-nav').removeClass('nav-up').addClass('nav-down') 
});

我更新了他的原fiddle，以反映增加的窗口大小調整處理。

來源

2017-08-17 14:33:52 lscmaro

太棒了！我認爲修復了移動部分。 Safari瀏覽器仍然存在問題，儘管在他的小提琴中沒有問題 – user3550879

我相信這與Safari瀏覽器在窗口中有一些「反彈」時有關係，因此當用戶滾動到頂部時它會應用導航類， – user3550879

由於這是另一個方面，這可能會幫助你：https://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect – lscmaro

代碼在Safari和響應式瀏覽器中無法正常工作

回答

相關問題