Problem with page scrolling on iPad

I’ve used Page Scroller Lite http://pagescroller.com to set up a single-page site.

http://nullsieben.co.uk/thestitchshop

I’ve just had a look at it on a first generation iPad, and there seems to be a problem with scrolling:

• Scolling works only once when clicking on a menu item. It will only work again after one touched scrolls the page ‘manually’ by sliding the finger across the page.

• The menu bar doesn’t seem to stick exactly to the top always.

I would be grateful for any help with this. Many thanks.

Tapping is not the same as clicking, the reason for the problem is that the content gets the focus after the scroll and tapping on navigation actually taps behind it… weird, I know.

One of the fixes that worked for my position fixed element was to make it position relative after the scroll and put it back to fixed. This seems to does the trick and gets the fixed element in focus again.

Here’s the code


$('.navigation-link').bind('click', function(e) {

	// The internal element to which to scroll to. (getting it from the anchor's href which is the elements ID)
        var topScrollTarget = $(this.hash).offset().top;
						
	$('html,body').animate({

		scrollTop: topScrollTarget

	}, 500, function() {

                // Header (html5) is my fixed element
		$('header').css({ 'position': 'relative' });
                window.scroll(0, topScrollTarget);
		$('header').css({ 'position': 'fixed' });

	});			
});