Lagebild: Sticky Section-Nav und Scroll-Spy entfernt
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
@@ -73,12 +73,6 @@
|
||||
<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>
|
||||
|
||||
|
||||
@@ -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 ---------- */
|
||||
|
||||
@@ -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');
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren