在移动Safari中向下滚动时执行操作

Question

In the site that I'm building, I have it set up where when the user scrolls down the header fades to zero opacity. I'd like the same thing to happen in Mobile Safari but the JS I'm using doesn't seem work at all on mobile.

function EasyPeasyParallax() {
   scrollPos = $(document).scrollTop();
    $('#header').css({
        'opacity': 1-(Math.min(scrollPos/70,1))
    });
};



 $(function(){
    $('body').bind('mousewheel',EasyPeasyParallax);
});

Answer 1

Looks like this actually is possible!

http://wicky.nillia.ms/headroom.js/

Answer 2

You should use .on('scroll',EasyPeasyParallax) . However, this won't work in mobile Safari, because mobile Safari only triggers the scroll event, when the scrolling has finished. So I believe there currently is no easy way to achieve this behavior in mobile safari.