IOS Safari: Anchors within a fixed positioned element only work once?

I have that problem aswell. And I kind of half solved it by letting javascript do the scrolling of the nav when a nav anchor is clicked. And because normal touch-scrolling does not give an event until the finger lets go of the screen, I use position:fixed which makes the touch-scrolling nicer than javascript can, see apples dev-site (developer.apple.com/library/IOs/#documen...) It is not the ultimate solution, but in my opinion it is better than not working at all.

This script also checks the width of the window to make sure that it only applies this to smaller screens, well, devices Here is my code, and if you find it useful, make it better or find a better solution, please share :) NAV POSITION */ var specScroll = false; // If special scrolling is needed /* Check what kind of position to use. */ (function navPos() { var width = checkWidth(); if (width = null) { specScroll = true; }else{ specScroll = false; window. Onscroll = NaN; } })(); $(window).

Resize( function(){ navPos(); } ); // After resizing, check what to use again. /* When clicking one of the nav anchors */ $(function() { $('a'). Bind('click',function(e){ var $anchor = $(this); if(specScroll){ $('#nav').

Css('position', "absolute"); window. Onscroll = anchorScroll; } $('html, body').stop(). Animate({ scrollTop: $($anchor.

Attr('href')).offset(). Top }, 700,'easeOutExpo', function(){ if(specScroll){setTimeout("window. Onscroll = touchScroll;", 100);} // the set timeout is needed for not overriding the clickability of the anchors after anchor-scrolling.

}); e.preventDefault(); }); }); /* While the user clicks and anchors in nav */ function anchorScroll() { $('#nav'). Css('top', window. PageYOffset); } /* the first time the user scrolls by touch and lift the finger from screen */ function touchScroll() { $('#nav').

Css('position', 'fixed'); $('#nav'). Css('top', 0); window. Onscroll = NaN; } /* CHECK WIDTH OF WINDOW */ function checkWidth() { myWidth = 0; if( typeof( window.

InnerWidth ) == 'number' ) { myWidth = window. InnerWidth; //Non-IE } else if( document. DocumentElement && ( document.documentElement.

ClientWidth ) ) { myWidth = document.documentElement. ClientWidth; //IE 6+ in 'standards compliant mode' } else if( document. Body && ( document.body.

ClientWidth ) ) { myWidth = document.body. ClientWidth; //IE 4 compatible } return myWidth; } I use this solution on a project page, try it out: dare.niklasek.se.

I have that problem aswell. And I kind of half solved it by letting javascript do the scrolling of the nav when a nav anchor is clicked. And because normal touch-scrolling does not give an event until the finger lets go of the screen, I use position:fixed which makes the touch-scrolling nicer than javascript can, see apples dev-site (developer.apple.com/library/IOs/#documen...).

It is not the ultimate solution, but in my opinion it is better than not working at all. This script also checks the width of the window to make sure that it only applies this to smaller screens, well, devices. Here is my code, and if you find it useful, make it better or find a better solution, please share :) /* NAV POSITION */ var specScroll = false; // If special scrolling is needed /* Check what kind of position to use.

*/ (function navPos() { var width = checkWidth(); if (width Match(/iPad/i)! = null) { specScroll = true; }else{ specScroll = false; window. Onscroll = NaN; } })(); $(window).