projects/papa-kind-treff.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ycyxc

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-12-28 23:57:29 +01:00
parent 51872e9a69
commit 59fc0bbda8
3 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
partials/structure/nav.php
View File

@@ -49,3 +49,4 @@ $isDebug = defined('APP_DEBUG') && APP_DEBUG === true;
<?php endif; ?> <?php endif; ?>
</div> </div>
</header> </header>
<div id="headerSentinel" class="header-sentinel" aria-hidden="true"></div>

1
public/assets/css/app.css
View File

@@ -37,6 +37,7 @@ body {
.site-header.is-scrolled .nav-row { padding: 10px 0; } .site-header.is-scrolled .nav-row { padding: 10px 0; }
.site-header.is-scrolled .brand__logo { width: 46px; height: 46px; } .site-header.is-scrolled .brand__logo { width: 46px; height: 46px; }
.site-header.is-scrolled .brand__name { font-size: 17px; } .site-header.is-scrolled .brand__name { font-size: 17px; }
.header-sentinel { display:block; width:100%; height:1px; pointer-events:none; }
.nav-links { .nav-links {
display: flex; display: flex;

33
public/assets/js/app.js
View File

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
const isLoggedIn = body.dataset.auth === '1'; const isLoggedIn = body.dataset.auth === '1';
const childGender = body.dataset.childGender || ''; const childGender = body.dataset.childGender || '';
const header = document.querySelector('.site-header'); const header = document.querySelector('.site-header');
const headerSentinel = document.getElementById('headerSentinel');
// Logo-Logik // Logo-Logik
const pickLogo = (gender) => { const pickLogo = (gender) => {
@@ -15,28 +16,22 @@ document.addEventListener('DOMContentLoaded', () => {
img.src = `/assets/bilder/${chosenLogo}`; img.src = `/assets/bilder/${chosenLogo}`;
}); });
// Header shrink on scroll with hysteresis to avoid flicker // Header shrink via IntersectionObserver (no flicker around threshold)
let ticking = false; if (header && headerSentinel && 'IntersectionObserver' in window) {
let isShrunk = false; const observer = new IntersectionObserver(([entry]) => {
const SHRINK_ON = 140; header.classList.toggle('is-scrolled', !entry.isIntersecting);
const SHRINK_OFF = 90; }, {
const onScroll = () => { rootMargin: '-1px 0px 0px 0px',
if (ticking || !header) return; threshold: 0,
ticking = true;
window.requestAnimationFrame(() => {
const y = window.scrollY;
if (!isShrunk && y > SHRINK_ON) {
isShrunk = true;
header.classList.add('is-scrolled');
} else if (isShrunk && y < SHRINK_OFF) {
isShrunk = false;
header.classList.remove('is-scrolled');
}
ticking = false;
}); });
}; observer.observe(headerSentinel);
} else if (header) {
// Fallback with simple threshold
const limit = 120;
const onScroll = () => header.classList.toggle('is-scrolled', window.scrollY > limit);
onScroll(); onScroll();
window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('scroll', onScroll, { passive: true });
}
// Mobile Menü // Mobile Menü
const mobileMenu = document.getElementById('mobileMenu'); const mobileMenu = document.getElementById('mobileMenu');