粘滯菜單在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）;
}