CODEWITHSUNDEEP
javascriptcssmobilemobile-safari
Jeremy P. Beasley
Jeremy P. Beasley

Reputation: 709

Perform action when scrolling down in mobile Safari

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);
});

Upvotes: 0

Views: 82

Answers (2)

Jeremy P. Beasley
Jeremy P. Beasley

Reputation: 709

Looks like this actually is possible!

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

Upvotes: 2

rauberdaniel
rauberdaniel

Reputation: 1033

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.

Upvotes: 0

Related Questions