Hi I have run into a issue recently. I am working on a website that involves quite a bit of scrolling: basically, there is a fixed position menu with some anchor links. when you click on an anchor links the page automatically scrolls down to the desired position. All good except that there is a bug in the Ipad version 5 of the OS http://weedygarden.net/2012/04/ios5-position-fixed-bug/. In a nutshell, on the ipad when you click on an anchor something happens and all the anchors are disabled till you manually scroll a bit. A solution - detailed in the link above - is to hide the navigation after you click on a link, and keep it hidden till the user manually scrolls the windows. To implement that I need to fire an event on scroll, so something like after the page has automatically scrolled to desired position, if user scrolls again, bring the menu back. Take this code that perform the automatic scroll:
$('myDiv a').click(function (e) {
e.preventDefault();
var arrayID = $(this).attr('href').split('#');
var theId = arrayID[1];
$('body, html').stop();
$(".navigation").slideUp('fast');
$('body,html').animate({
scrollTop: $("#" + id).offset().top - 290
}, 800);
return false;
});
When it scrolls the navigation is hidden $(".navigation").slideUp('fast');
, then I need to bring it back when the scroll ends (and therefore I can't do it as a callback function of the animate method), so something like
$(window).scroll(function()
$(".navigation").slideDown('fast');
});
which needs to go somewhere. But I have read thatscroll()
doesn't differentiate between human scroll and automatic scroll. This difference is crucial, because everytime the page automatically scrolls then the scroll()
gets executed whereas I need a way to say "execute that only when it's the user doing the scrolling".
Hope it makes sense
thanks