Scrolling on a mobile devices

[mkaschke]

Problem: The sticky menu only shows up when the user stops scrolling.

On mobile devices the user is scrolling for a long distance so the sticky menu shows up really late and it looks like an error.

thx

[rabbithops]

Noticed on Google Chrome (Apple IOS).

[SharpEdgeMarshall]

+1

[hknaksu]

+1

[jkcjkc82]

This is a bug in ios related to position:fixed. However sticky.js sets position:fixed dynamically. If you use this way, you never avoid the issue. In order to avoid this, you should use the way to be changed by scrollTop

for example in css:

header {position:fixed;width:100%;top:44px;}
.is-sticky header {top:0px;}

for example in js:

        $(window).on('scroll', () => {
            let scrollTop = $(window).scrollTop();

            if(scrollTop > 44) {
                $(document.body).addClass('is-sticky');
            } else {
                $(document.body).removeClass('is-sticky');
            }
        })

[xrochoa]

Adding transform: translate3d(0, 0, 0); to the sticky element fixed the issue for me.

It would be great to add s.stickyElement.css('transform', 'translate3d(0px, 0px, 0px)'); after s.stickyWrapper.css('height', s.stickyElement.outerHeight()) in the plugin.

[weinbee]

god bless you, @xrochoa

[samjonesigd]

@xrochoa bug still present for me on iPad ios10