粘性菜单在iOS Safari和Chrome上过早跳转到固定位置

Question

我对这个看似简单的代码失去了理智。我已经为几个网站创建了一个粘性菜单，它们都有同样的问题。在iOS设备上，至少在装有最新iOS的iPhone 6上，菜单过早地跳到固定位置。就好像 iOS 错误地计算了元素的偏移量并过早地运行了函数。虽然对于我的生活，我不知道如何或为什么。在桌面上，它工作正常。在安卓上，它工作正常。请帮忙！！该网站是[DreaD插图][1]。我已经尝试了我能想到和在互联网上找到的所有东西。另外，我注意到，它在初始加载时计算不正确，但是当您向下滚动并向上滚动时，它似乎可以工作。帮助！代码如下。

var navBar = jQuery("nav.site-navigation.main-navigation.primary.mobile-navigation");
var topofNav = navBar.offset().top;
stickyDiv = "being-sticky";
mahMain = jQuery('#main').outerWidth();
jQuery(window).load(function(){
    jQuery(window).on('scroll', function() {
        if (jQuery(document).scrollTop() > topofNav) {
            navBar.addClass(stickyDiv);
            navBar.outerWidth(mahMain);
        } else {
            navBar.removeClass(stickyDiv);
        }
    });
});

.being-sticky {
   position:fixed;
   top:0;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 1

感谢大家的帮助！所以这对我来说是一个简单的野生动物园修复。我创建了一个 whenToScroll 变量，如果是 safari 或其他浏览器，则以不同的方式设置它！这似乎解决了它！虽然我尝试了 chrome 的野生动物园设置，但没有去。

if (jQuery.browser.safari)
        var whenToScroll = jQuery("div.hgroup.full-container").outerHeight();
        else
            var whenToScroll = navBar.offset().top; 

Answer 2

您是否尝试过设置超时并查看它在 IOS 上的显示方式？如果这是一个以不同方式读取的计时问题，则可以使用navigator.userAgent稍后删除仅适用于IOS设备的类。

if（/

iPhone|iPad|iPod/.test（navigator.userAgent）） {//IOS browsers
   setTimeout（function（）{
     navBar.removeClass（stickyDiv）;
     }， 7000）;无论您需要等待多少毫秒
}else{
   navBar.removeClass（stickyDiv）;
}