0

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>
Derek Brown
  • 4,232
  • 4
  • 27
  • 44
Davina
  • 11
  • 1

2 Answers2

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;
Davina
  • 11
  • 1
0

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);
}

booellean
  • 71
  • 7
  • Yup, tried that, but on the addClass. I'm a little confused as to how delaying the removeClass would help. The problem is the site loads with the class already removed but then on iOS adds the class too quickly. – Davina Oct 21 '17 at 09:29
  • Thank you for clarifying what you have tried, and I apologize I didn't see it the first time. Safari does calculate .scrollTop() a little differently. Please see the attached thread for clarification and see DevDonkey's answer. https://stackoverflow.com/questions/25075117/window-scrolltop-is-not-working-in-safari Hope that helps! – booellean Oct 24 '17 at 01:26