粘滞菜单在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变量，并设置它是否是野生动物园或其他浏览器！ 那似乎解决了！ 虽然我尝试了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浏览器
的setTimeout（函数（）{
navBar.removeClass（s​​tickyDiv）;
}，7000）； //无论需要多少毫秒，您都需要等待
}其他{
navBar.removeClass（s​​tickyDiv）;
}