Class not updating

[OvalMedia]

I want a header class ("hidden") to be set depending on wether the user a scrolled up or down.
For some reason the class attribute is not being updated even though the console outputs clearly show the hidden value does change.
What am I missing here?
Thank you

<header x-data="stickyHeader()" :class="{ 'hidden': hidden }"></header>
<script>
    function stickyHeader() {
        return {
            lastOffset: 0,
            hidden: false,

            init() {
                window.addEventListener('scroll', this.scroll);
            },

            scroll() {
                let offset = window.pageYOffset;
                this.hidden = offset > this.lastOffset;
                this.lastOffset = offset;

                console.log('offset: ' + offset);
                console.log('lastOffset: ' + this.lastOffset);
                console.log('hidden: ' + this.hidden);
            }
        }
    }
</script>

[ekwoka]

Your scroll handlers this does not refer to the data context, it refers to the window.

You need to bind the handler, or ideally, just use alpine to register the handler.

<header x-data="stickyHeader" :class="{ 'hidden': hidden }" @scroll.window="scroll"></header>

[OvalMedia]

Perfect, thank you!