Skip to content

Instantly share code, notes, and snippets.

@design-innovations

design-innovations/alpine-scroll-fixed-header.js

Created May 26, 2021 14:40
Show Gist options
  • Save design-innovations/88c5c4a4dfffdf0284c9347606c2049a to your computer and use it in GitHub Desktop.
Save design-innovations/88c5c4a4dfffdf0284c9347606c2049a to your computer and use it in GitHub Desktop.
Download ZIP
Alpine - Scroll detection - fixed header
Raw
alpine-scroll-fixed-header.js
<div x-data="{ scrollAtTop: true }">
<nav
class="p-4 w-full fixed"
:class="{ 'bg-white shadow-md' : !scrollAtTop }"
@scroll.window="scrollAtTop = (window.pageYOffset > 50) ? false : true"
>
Header - Menu Bar
</nav>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment