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

Question

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

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

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