Code not working correctly in Safari and responsive browsers

Question

I have the following code which 'shows/hides' my navigation up off the top of the screen, and brings it down again.

jQuery(document).ready(function($){
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('nav').outerHeight(true);

  $(window).scroll(function(event) { didScroll = true; });

  setInterval(function() {
    if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
 }, 0);

function hasScrolled() {
 if($( window ).width() > 768) {
   var st = $(this).scrollTop();
 if (Math.abs(lastScrollTop - st) <= delta)
   return;
 if (st > lastScrollTop) {
    // Scroll Down
        $('#screen-nav').removeClass('nav-down').addClass('nav-up');
   } else { 
        $('#screen-nav').removeClass('nav-up').addClass('nav-down');
   }  

  }
    lastScrollTop = st;
  }

});

css

#screen-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
 }

#screen-nav.nav-up { top: -100px; }
#screen-nav.nav-down { top: 0; }

The problem is that on the safari browser and when the screen changes from mobile size (<768px on all browsers) to screen size sometimes the .nav-up class gets added and the navigation doesn't show. But only when the user scrolls to the top of the page.

Not sure if there is a better way to write the code to ensure proper functionality.

Not super familiar with fiddle (can never get the external java to work) but heres what I got https://jsfiddle.net/ke6fwpL1/#&togetherjs=7lBzxRlipr — user3550879, Aug 17 '17 at 13:53
The code works like I want it despite the two issues mentioned. I guess I'm looking for fail-safes for those issues — user3550879, Aug 17 '17 at 13:55

score 1 · Accepted Answer · answered Aug 17 '17 at 14:33

1

I see you are using this example. He has the fiddle working well too. the only thing is that on browser resize nothing regarding show the nav is in place. You should be able to just add that separately.

$(window).resize(function(){
    $('#screen-nav').removeClass('nav-up').addClass('nav-down')
});

I updated his original fiddle to reflect the addition of window resize handling.

answered Aug 17 '17 at 14:33

lscmaro

995
8
22

Awesome!, I think that fixed the mobile part. Still having issues in safari, despite it not having issues in his fiddle – user3550879 Aug 17 '17 at 18:32
I believe it have something to do with Safari having some 'bounce' in the window when you scroll so it applies nav-up class when the user scrolls to the top – user3550879 Aug 17 '17 at 18:36
Since that is another aspect, this might help you: https://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect – lscmaro Aug 17 '17 at 18:57

Code not working correctly in Safari and responsive browsers

1 Answers1