Navbar collapse on iOS not working correctly

[user-1138]

I did see Issue #32 marked as closed a few years back, but I've just come across your theme and I'm experiencing the same problems on iOS - basically you need to scroll all the way to the top/bottom of the page and then scroll up/down again (kind of like a double-scroll) for the "navbar-shrink" class to be added/removed.

FYI - In my brief testing I've found that by removing this js -

  // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

and replacing it with something like this, works much better -

  $(document).scroll(function() {
   if($(window).scrollTop() !== 0) {
       $("#mainNav").addClass("navbar-shrink");
   } else {
       $("#mainNav").removeClass("navbar-shrink");
   }
  });

It's far from perfect (i.e. it does 'shrink' earlier than previously and if you scroll up when at the top of the page, it will (briefly) apply the class and the navbar shrinks/changes color until the page falls back down to the top again), and I'm not sure exactly what Crapple's problem is, but this is much better on iOS and still works as you'd expect on Desktop/Android.

I hope that helps - anyways, use it as you please!

Tested On -
iOS - v9.3.5 Safari, Firefox v8.3, Chrome v63.3239.73
Grayscale v5.0.2 & 5.0.3

PS: Great looking theme BTW! :-)

[scottjr101]

I moved this whole theme over into my React app and this was the only issue I had. Thank you so much for this little bit of code, saved me hours of debugging!