svelte-shy-header

Svelte Shy Header

Svelte shy header: how to add a vanishing, sticky peekaboo header that reappears when the user scrolls up using Svelte and CSS to your site.

Rodney Lab svelte-shy-header Github banner

Rodney Lab logo

Svelte Shy Header

svelte-shy-header

SvelteKit demo code for implementing a shy, peekaboo page header which reappears when the user scrolls up. Code accompanies the article on Svelte shy header implementation. If you have any questions, please drop a comment at the bottom of that page. As mentioned in the article, this code is based on a Jake Archibald CodePen.

Building and previewing the site

If you're seeing this, you've probably already done this step. Congrats!

git clone https://github.com/rodneylab/svelte-shy-header.git
cd svelte-shy-header
pnpm install # or npm install
pnpm dev

Building

pnpm run build

You can preview the built app with pnpm preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

Feel free to jump into the Rodney Lab matrix chat room.

Top categories

Loading Svelte Themes