Sticky menu jumps to fixed position too early on iOS Safari and Chrome

Question

I am losing my mind with this seemingly simple code. I have created a sticky menu for a few sites and they all share the same problem. On iOS devices, at least the iPhone 6 with up to date iOS, the menu jumps into its fixed position too early. It's as if iOS miscalculates the offset for the element and runs the function too early. Though for the life of me I can't figure out how or why. On desktop it works fine. On Android it works fine. Please help!! The site is [DreaD Illustrations][1]. I have tried everything I can think of and find on the internet. Also, I noticed, it calculates incorrectly on initial load, but when you scroll down and scroll back up it seems to work. Help! The code is below.

 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

Thanks everyone for your help! So it was a simple fix for me for safari. I created a variable of whenToScroll and set it differently if it was safari or another browser! That seemed to fix it! Though I tried the safari setting for chrome and no go.

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

Answer 2

Have you tried setting a timeout and seeing how that displays on IOS? If it's a timing thing that's being read differently, you can use navigator.userAgent to remove the class a bit later for IOS devices only.

if(/iPhone|iPad|iPod/.test(navigator.userAgent)) { //IOS browsers
setTimeout(function(){
navBar.removeClass(stickyDiv);
}, 7000); // however many milliseconds you need it to wait for
}else{
navBar.removeClass(stickyDiv);
}