I have implemented a code to hide my navbar when scrolling down and show it when scrolling up. This code works perfectly on desktop and in all browsers, including Chrome on mobile (iPhone). However, in Safari, the navbar sometimes shows, hides, and shows again multiple times before disappearing.
It seems like the event is being triggered multiple times.
Below is the code that is currently working:
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// downscroll code
$("#soulnavbar").slideUp()
} else {
// upscroll code
$("#soulnavbar").slideDown();
}
lastScrollTop = st;
});
http://jsfiddle.net/5n630gs2/1/
You can view the website where this code is implemented here:
I would appreciate it if someone could help me understand why this issue is occurring in Safari and if there is a possible solution. Thank you!