代码在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和响应式浏览器中无法正常工作

回答

相关问题