Scroll Watcher

ScrollWatcher.js

/*
Usage: 
new ScrollWatcher({
    selector: '.header--scroll',
    classes: 'header--scroll-in-view',
    scrollOffset: 0,
})
*/

export default class {
    constructor(
        config = {
            selector: '',
            classes: 'not-top',
            scrollOffset: 0,
        }
    ) {
        this.selector = config.selector
        this.classes = config.classes
        this.scrollOffset = config.scrollOffset

        this.bindEvents()
    }

    bindEvents() {
        const self = this
        const selectors = document.querySelectorAll(self.selector)

        if (selectors) {
            selectors.forEach(selector => {
                window.addEventListener(
                    'scroll',
                    function() {
                        if (this.scrollY > self.scrollOffset) {
                            selector.classList.add(self.classes)
                        } else {
                            selector.classList.remove(self.classes)
                        }
                    },
                    false
                )
            })
        }
    }
}