Feeling frustrated with this seemingly straightforward code challenge. My sticky menu is causing me headaches on iOS devices, particularly the iPhone 6 running the latest iOS. It seems like the menu jumps into its fixed position too early, leading me to believe that iOS is somehow miscalculating the offset for the element and triggering the function prematurely. The perplexing part is that it works perfectly fine on desktop and Android devices. I've exhausted all my options and scoured the internet for solutions to no avail. The website in question is [DreaD Illustrations][1]. Strangely, upon initial load, the calculation seems off, but if you scroll down and back up, it miraculously starts working correctly. Any assistance would be greatly appreciated! Check out the code snippet 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>