How does StickyBits check if the browser supports position: sticky? about stickybits HOT 4 CLOSED

@jdengsc this is a fine place. 🤓 Stickybits checks to see if sticky is supported by looping over an array of browser prefixes for sticky and seeing if an element adds an inline sticky style.

https://github.com/dollarshaveclub/stickybits/blob/master/src/stickybits.js#L6

https://github.com/dollarshaveclub/stickybits/blob/master/src/stickybits.js#L44

If position: sticky is supported, then no event listener has to be added.

from stickybits.

@yowainwright Thanks for the quick support and the link! The code makes a lot of sense to me- I'd prefer to use browser supported position: sticky if available and don't want to add too much bloat to support stickiness on older browsers

from stickybits.

Since my question was answered, I am closing this issue. Thanks!

from stickybits.

The code has moved since the above links where provided, I believe it's here now :

Here is my adaptation into a standalone function ( if it may help someone 🤷‍♂️ ) :

function isPositionStickySupported() {
    const prefix = ['', '-o-', '-webkit-', '-moz-', '-ms-']
    const test = document.head.style

    for (let i = 0; i < prefix.length; i += 1) {
        test.position = `${prefix[i]}sticky`
    }

    return test.position === 'sticky' ? true : false;
}

from stickybits.