valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement sticky header with height compression and glassmorphism
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-20 12:45:32 +01:00
parent 78dc8cbd08
commit d33dcd7fb9
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
default.hbs
View File

@@ -5,6 +5,7 @@
mobileMenuOpen: false, mobileMenuOpen: false,
currentPath: window.location.pathname, currentPath: window.location.pathname,
showScrollTop: false, showScrollTop: false,
isSticky: false,
init() { init() {
$watch('theme', val => { $watch('theme', val => {
localStorage.setItem('theme', val); localStorage.setItem('theme', val);
@@ -13,9 +14,10 @@
document.documentElement.setAttribute('data-theme', this.theme); document.documentElement.setAttribute('data-theme', this.theme);
document.documentElement.classList.remove('hidden'); document.documentElement.classList.remove('hidden');
// Handle scroll for scroll-to-top button // Handle scroll for sticky header and scroll-to-top button
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
this.showScrollTop = window.scrollY > 400; this.showScrollTop = window.scrollY > 400;
this.isSticky = window.scrollY > 50;
}); });
// Update currentPath on navigation to keep menu highlights in sync // Update currentPath on navigation to keep menu highlights in sync

10
partials/header.hbs
View File

@@ -1,10 +1,14 @@
<header class="text-[var(--text-primary)] body-font shadow-lg bg-[var(--bg-primary)]"> <header
<div class="container mx-auto flex p-5 items-center justify-between"> class="sticky top-0 z-40 w-full transition-all duration-500 ease-in-out border-b border-transparent"
:class="isSticky ? 'bg-[var(--bg-primary)]/80 backdrop-blur-md py-2 shadow-lg border-[var(--bg-tertiary)]' : 'bg-[var(--bg-primary)] py-5 shadow-none'">
<div class="container mx-auto flex items-center justify-between transition-all duration-500 ease-in-out px-5">
<a href="{{@site.url}}" class="flex title-font font-medium items-center text-[var(--text-primary)]" @click.stop> <a href="{{@site.url}}" class="flex title-font font-medium items-center text-[var(--text-primary)]" @click.stop>
{{#if @site.logo}} {{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}" class="h-10 w-auto site-logo"> <img src="{{@site.logo}}" alt="{{@site.title}}" class="transition-all duration-500 w-auto site-logo" :class="isSticky ? 'h-8' : 'h-10'">
{{else}} {{else}}
<div class="transition-all duration-500" :class="isSticky ? 'scale-90' : 'scale-100'">
{{> "icons/logo" class="h-10 w-auto site-logo"}} {{> "icons/logo" class="h-10 w-auto site-logo"}}
</div>
{{/if}} {{/if}}
</a> </a>