Apple Bounce-Effekt & fixe Navigation

Auf Applegeräten gibt es in Browsern beim Scrollen einen "Bounce-Effekt" (auch elastic scrolling oder rubber-band genannt): wenn nach ganz oben gescrollt wird, tritt dieser "Overscrolling-Effekt" auf und der im Browser sichtbare Bereich geht über den eigentlich scrollbaren Bereich hinaus, bevor er wieder in den scrollbaren Bereich einrastet. Im Grunde eine sinnfreie Spielerei, die aber auch lästige Nebeneffekte haben kann.

In meinem Fall eine Navigation, die beim Scrollen nach unten ausgeblendet und beim Scrollen nach oben wieder eingelendet werden sollte. Eigentlich keine komplizierte Sache:

var lastScrollTop = 0;
$(window).scroll(function(event){
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
         $("#header").fadeOut('slow'); }
    else {
        $("#header").fadeIn("slow");
    }
lastScrollTop = st;   

Doch der geschildete Bounce-Effekt machte hier einen Strich durch die Rechnung, da das einrasten in die Normalposition als nach unten scrollen gewertet wird und die Navigation sofort wieder ausblendet. D.h. beim Scollen nach oben wird die Navigation kurz einblendet, der Bounce-Effekt wird aktiv, es wird kurzzeitig ein kleiner Bereich oberhalb der fixierten Navigation (die sich am normalen sichtbaren Bereich orientiert) sichtbar, dann rastet der sichtbare Bereich wieder ein, wobei die Navigation - da ja im weitestesten Sinne nach unten gescrollt wird - wieder verschindet. Das Problem scheint auch verbreitet zu sein, die Lösung dagegen gar nicht so einfach, v.a. da bestimmte Ansätze in neueren IOS Versionen nicht mehr wirksam sind.

var lastScrollTop = 0;
$(window).scroll(function(event){
    var st = $('html').scrollTop() || $('body').scrollTop();
    if (st > lastScrollTop) {
        $("#header").fadeOut('slow'); }
    else {
         $("#header").fadeIn("slow");
    }
    lastScrollTop = Math.abs(st);

Fett markiert die Anpassungen, die das Problem in meinem Fall gelöst haben.