Sticky useStickyClasses odd behaviour

quantumwebco commented 4 years ago

stickybits: 3.6.7 Windows: 10 Chrome: 77.0.3865.90 (Official Build) (64-bit) FF: 69.0.2 (64-bit)

Hey I'm really sorry I know this has been posted before and there is lots of discussion around it and I see reference to fixes in version 2.x but using version 3.6.7 I'm still having issues.

When I refresh the page scrolled halfway, the classes aren't added on page load. Only when I scroll.

If starting from the top, the class .js-is-sticky is added immediately on scroll, before the element reaches the top of the viewport

When the element is roughly it's own height away from the top of the viewport it adds js-is-sticky--change

No other classes are added

I looked at the update() method in the docs but can't see anything that helps.

My markup is

    <body>
        <div class="sticky">
            ...some content
        </div>
        ...more content
    </body>

JS

import stickybits from 'stickybits'

class Sticky {
    constructor() {
        const sticky = stickybits('.sticky', {useStickyClasses: true});
        sticky.update();
        // when the url hash changes
        window.addEventListener('hashchange', () => {
            sticky.update();
        });
    }
}

export default Sticky;

Many thanks

DanielRuf commented 4 years ago

Hi @quantumwebco,

thanks for reporting this. Can you also provide a codepen that reproduces this?

quantumwebco commented 4 years ago

@DanielRuf

Here is an example of the issue. I'll try set up a codepen soon as I get a minute!

https://e21.quantumdev.co/

Thanks a lot

quantumwebco commented 4 years ago

Here's a codepen of the issue

https://codepen.io/quantumweb/pen/dyyyqQq

Notice also that also after scrolling down a ways then it does add the js-is-stuck at which point it no longer sticks to the top

Thanks!

harrisonfm commented 4 years ago

I'm having this issue too. No js class on pageload.

Also, .js-is-sticky--change removes at the bottom of the page I'm on.

diegoiglesias commented 4 years ago

I'm having this issue too.

njbarrett commented 4 years ago

I too, am having this issue

mbark commented 4 years ago

The problem is that the manageState function isn't being called in the constructor, only on scroll.

A workaround for this problem would be to trigger the scroll event on the scroll element. If you don't need to support IE11 (or you have the necessary polyfills) you can use CustomEvent.

el.dispatchEvent(new CustomEvent('scroll'))

Or if you need IE11 support you can probably just scroll up and down one pixel.

window.scrollTo(window.scrollX, window.scrollY - 1);
window.scrollTo(window.scrollX, window.scrollY + 1);

Triggering scroll events taken from this Stack Overflow post.

mbark commented 4 years ago

I think I fixed the problem in #658, if not then please tell me and I'll take another look!

dollarshaveclub / stickybits

Sticky useStickyClasses odd behaviour #582