Lagebild: Sticky Section-Nav und Scroll-Spy entfernt

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-03-07 16:01:43 +01:00
Ursprung dc0792c073
Commit 06c99fe4db
3 geänderte Dateien mit 1989 neuen und 2105 gelöschten Zeilen

Datei anzeigen

@@ -73,13 +73,7 @@
<div class="timeline-strip" id="timeline-strip"></div>
<div class="timeline-dropdown" id="timeline-dropdown"></div>
</div>
<nav class="section-nav" id="section-nav">
<a class="section-nav-link active" href="#section-lagebild" data-section="lagebild">Lagebild</a>
<a class="section-nav-link" href="#section-karte" data-section="karte">Karte</a>
<a class="section-nav-link" href="#section-faktenchecks" data-section="faktenchecks">Faktenchecks <span class="section-badge" id="badge-faktenchecks"></span></a>
<a class="section-nav-link" href="#section-artikel" data-section="artikel">Artikel <span class="section-badge" id="badge-artikel"></span></a>
</nav>
</div>
</div>
</div>
<!-- Main Content: All sections visible (Scroll-Narrative) -->

Datei anzeigen

@@ -15,7 +15,6 @@
--lb-success: #10B981;
--lb-warning: #F59E0B;
--lb-error: #EF4444;
--navbar-height: 72px;
}
/* ---------- Page Base ---------- */
@@ -217,13 +216,6 @@
background: var(--lb-bg-card);
border-bottom: 1px solid var(--lb-border);
padding: 0 20px;
position: sticky;
top: var(--navbar-height);
z-index: 90;
transition: box-shadow 0.3s;
}
.control-bar.stuck {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.control-bar .container {
max-width: 1000px;
@@ -384,44 +376,6 @@
opacity: 0.7;
}
/* ---------- Section Navigation (Scroll-Spy) ---------- */
.section-nav {
display: flex;
gap: 0;
}
.section-nav-link {
display: inline-block;
padding: 12px 20px;
font-size: 0.9rem;
font-weight: 600;
color: var(--lb-text-sec);
text-decoration: none;
border-bottom: 3px solid transparent;
transition: all 0.2s;
white-space: nowrap;
}
.section-nav-link:hover {
color: var(--lb-text);
}
.section-nav-link.active {
color: var(--lb-accent);
border-bottom-color: var(--lb-accent);
}
.section-badge {
display: inline-block;
background: rgba(200, 168, 81, 0.12);
color: var(--lb-accent);
padding: 1px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
margin-left: 4px;
vertical-align: middle;
}
.section-nav-link.active .section-badge {
background: rgba(200, 168, 81, 0.22);
}
/* ---------- Main Content ---------- */
.lagebild-main {
padding: 2rem 0 4rem;
@@ -435,7 +389,6 @@
/* ---------- Content Sections ---------- */
.content-section {
margin-bottom: 3rem;
scroll-margin-top: calc(var(--navbar-height) + 120px);
}
/* ---------- Content Cards ---------- */

Datei anzeigen

@@ -39,11 +39,9 @@ var Lagebild = {
fact_checks: this.data.fact_checks
};
this.render();
this.initScrollSpy();
this.initLangToggle();
this.initScrollReveal();
this.initFloatingCta();
this.initStickyDetect();
} catch (e) {
console.error('Lagebild laden fehlgeschlagen:', e);
this.showError();
@@ -538,68 +536,7 @@ var Lagebild = {
document.getElementById('factchecks-content').innerHTML = h;
},
/* ===== SCROLL-SPY (Section Navigation) ===== */
initScrollSpy: function() {
var navLinks = document.querySelectorAll('.section-nav-link');
var sections = document.querySelectorAll('.content-section');
var controlBar = document.getElementById('control-bar');
// Smooth scroll on click
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function(e) {
e.preventDefault();
var targetId = this.getAttribute('href').substring(1);
var target = document.getElementById(targetId);
if (target) {
var offset = controlBar.offsetHeight + 20;
var navbarH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')) || 72;
var top = target.getBoundingClientRect().top + window.scrollY - offset - navbarH;
window.scrollTo({ top: top, behavior: 'smooth' });
}
});
}
// IntersectionObserver for scroll-spy
if (!('IntersectionObserver' in window)) return;
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var id = entry.target.id;
for (var j = 0; j < navLinks.length; j++) {
navLinks[j].classList.remove('active');
if (navLinks[j].getAttribute('href') === '#' + id) {
navLinks[j].classList.add('active');
}
}
}
});
}, { rootMargin: '-20% 0px -70% 0px' });
for (var i = 0; i < sections.length; i++) {
observer.observe(sections[i]);
}
},
/* ===== STICKY DETECTION ===== */
initStickyDetect: function() {
var controlBar = document.getElementById('control-bar');
if (!('IntersectionObserver' in window)) return;
// Sentinel element before control-bar
var sentinel = document.createElement('div');
sentinel.style.height = '1px';
sentinel.style.visibility = 'hidden';
controlBar.parentNode.insertBefore(sentinel, controlBar);
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
controlBar.classList.toggle('stuck', !entry.isIntersecting);
});
}, { threshold: 0 });
observer.observe(sentinel);
},
initLangToggle: function() {
var btn = document.querySelector('.lang-toggle');