Sticky element is flickering when scrollup - when sticking

[sunich]

For example in the demo site "http://stickyjs.com/", scroll using mouse wheel, when element is about to stick to top, it is disappearing for a moment and then displayed - this is causing a flicker effect, is there any solution for this sticking to happen in a smooth transition. But when, window is scrolled using mouse pointer, the transition is very smooth(this effect is required when scrolled using mouse wheel).

[garand]

Can you reproduce this effect on multiple browsers?

[sunich]

Hi, I have checked now, Flicker is happening predominantly in chrome browser. And less noticeable in Internet explorer but there is no issue and very smooth in firefox.

[darisi]

i have that same flickering problem in chrome.

[johannesjo]

Still an issue for me in the current version of chrome.

[thejae]

Same issue on Android.

[wpexplorer]

Looks line in Windows the mouse event on the scroll button does not trigger an actual scroll event until the mousewheel has finished scrolling. You'll need to bind scroller to the mousewheel, example:

$window.bind("mousewheel DOMMouseScroll MozMousePixelScroll", function() {
    scroller();
});

If there is a more efficient method, someone please let me know! Because when doing this since it's already bound to the scroll event it will run the scroller function 2x...hum...any ideas?

[aaronkantrowitz]

@wpexplorer thanks for this, it worked!

[wpexplorer]

@aaronkantrowitz - No problem! But make sure to test, I actually removed it from my project because I was having some bugs in Safari.