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

Question

这个看似简单的代码让我失去了理智。 我为几个站点创建了一个粘性菜单，它们都有相同的问题。在 iOS 设备上，至少是带有最新 iOS 的 iPhone 6，菜单过早地跳到其固定位置。就好像 iOS 错误地计算了元素的偏移量并过早地运行了该函数。虽然对于我的一生，我无法弄清楚如何或为什么。在桌面上它工作正常。在Android上它工作正常。请帮忙！！该网站是 [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 的 safari 设置，但没有成功。

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 浏览器
设置超时（函数（）{
navBar.removeClass(stickyDiv);
}, 7000); // 不管你需要等待多少毫秒
}其他{
navBar.removeClass(stickyDiv);
}