Ist-Zustand:
In einem "normalen" Onepager wandert die Klasse "sdoc" beim Scrollen von Menüpunkt zu Menüpunkt - je nach Scroll-Position.
Verantwortlich dafür ist wohl die Funktion adjustMenuClasses() in onepage.min.js, wo wohl auch gleich der onepage_toplink() mitgeregelt wird.
Nun bin ich auf die glorreiche Idee gekommen, auf das JS-basierte Scrolling zu verzichten, und es mit CSS zu machen.
Das geht - und ein Offset (100px) ist auch realisierbar.
Der CSS-Code dazu:
Code: Select all
:root {
scroll-behavior: smooth;
}
:target:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0;
}
Großer Nachteil dabei:
Die Klasse "sdoc" hängt am ersten Menüpunkt fest und bewegt sich kein Stückchen mehr - auch wenn man unendlich nach unten scrollt.
Das Schöne ist bzw. wäre, dass das gesamte Onepage-Template ohne JS auskommen könnte - wenn nicht die Hervorhebung des aktiven Menüpunktes gewünscht wäre.
Es steht also die Aufgabe, ein möglichst kleines JS-Script zu bauen, das die Sache mit dem aktiven Menüpunkt (sdoc oder etwas anderes) regelt.
Könnte man evtl. die Funktion adjustMenuClasses() dafür in eine eigene onepage.js übernehmen und alles Überflüssige entfernen?