This code was working fine on my iphone before updating to iOS 9.0.1 (13A404),
but now the same code seems to be working only after finger release,
or after the jQuery onscroll ends, when I do a quick swipe leaving the page scrolling...
$(document).on('scroll', function(){
if( $(this).scrollTop() > 0){
$('.menu').addClass('sticky');
}else{
$('.menu').removeClass('sticky');
}
});
The sticky menu just disappears until I release the finger up from the screen, losing the "stickying" effect in realtime during the swipe that I had before in all my websites and that are now broken...
How can solve this problem making them working like I had before? (smooth sticky in realtime)
After observing the same behaviour and testing around a bit, the simplest way is to activate 3D transforms as proposed in a similar question:
.sticky-element {
-webkit-transform: translate3d(0px,0px,0px);
}
I am seeing the same behavior. It seems iOS9 doesn't want to paint position: fixed elements until AFTER a scroll event has ended.
Example: http://senaeh.de/demo/stickyheaders/simple/
The new sticky header will not show until either the page stops scrolling or the user removes their finger from the screen. Other CSS changes such as background-color work as they should.
This is a regression since iOS8 allowed this completely. Sticky headers are unfortunately not smooth as of ios9.0.1. They still work great on aging Android devices so I'm not sure if this is a bug or if Apple is trying to increase battery life.
EDIT: I filed a bug with Apple (#22902083) so let's hope they make an update to remedy this.
