Linkformatierung location.href mit Hash-Teil
Fragesteller
- javascript
Habe eine Internetpräsenz, die nur aus einer einzigen Seite besteht.
In der Navigationsleiste, die man immer sehen kann, springe ich per #-Zeichen an die Stellen innerhalb dieser einzigen HTML-Seite.
Ich möchte den jeweiligen Link, zu dessen Bereich ich gerade gesprungen bin, verändern (zB deaktivieren oder sein optisches Erscheinungsbild verändern. Auch unsichtbarmachen wäre nicht unlogisch.
Allgemeiner formuliert: der link in der Navigationsleiste, der zu dem gerade aktiven, sichtbaren Bildschirmausschnitt passt, soll verändert werden.
Üblicherweise arbeitet man dazu mit location.href etc. Dies funktioniert auch, wenn sich hinter den Links der Navileiste verschiedene HTML-Seiten verbergen. Bei #-Abschnitten innerhalb einer HTML-Seite stehe ich aber vor einem Rätsel. Beim einfachen Scrollen verändert sich zB nicht die URL in der Adresszeile des Browsers. Dies geschieht nur beim Klicken auf einen Link in der Navileiste.
Danke!
Om nah hoo pez nyeetz, Fragesteller!
Ich möchte den jeweiligen Link, zu dessen Bereich ich gerade gesprungen bin, verändern (zB deaktivieren oder sein optisches Erscheinungsbild verändern.
Das ist mit CSS nicht möglich. Möglichkeiten den angeklickten Link zu verändern hast du mit JS. Analog zu diesem Beispiel: https://forum.selfhtml.org/?t=214999&m=1471896
Allgemeiner formuliert: der link in der Navigationsleiste, der zu dem gerade aktiven, sichtbaren Bildschirmausschnitt passt, soll verändert werden.
Das ist aber eine ganz andere Nummer. Du könntest die Links in Abhängigkeit von linkziel.offset.top formatieren.
Bei #-Abschnitten innerhalb einer HTML-Seite stehe ich aber vor einem Rätsel. Beim einfachen Scrollen verändert sich zB nicht die URL in der Adresszeile des Browsers. Dies geschieht nur beim Klicken auf einen Link in der Navileiste.
Ja. Das Dokument bleibt ja dasselbe
Matthias
Danke Matthias!
Ich glaube nur, dass ich mit beiden Vorschlägen nicht weiter komme.
Wenn es eine Eigenschaft gäbe, die mir die gerade auf dem Bildschirm sichtbaren Elemente anzeigen könnte, dann käme ich vielleicht weiter. Aber so etwas habe ich beim wenn auch sehr groben Durchsuchen der Objektreferenz von JavaScript nicht gefunden.
Trotzdem Danke nochmals!
Frank
Om nah hoo pez nyeetz, Fragesteller!
Wenn es eine Eigenschaft gäbe, die mir die gerade auf dem Bildschirm sichtbaren Elemente anzeigen könnte,
scrollTop kann das für deinen Fall leisten.
Matthias
Hallo,
Wenn es eine Eigenschaft gäbe, die mir die gerade auf dem Bildschirm sichtbaren Elemente anzeigen könnte, dann käme ich vielleicht weiter.
Da sich die Viewporthöhe, die Scrollposition und die Position von Elementen auslesen lassen, ist es möglich, für jedes Element zu prüfen, ob es sich gerade im Viewport befindet.
Da das ziemlich viele Berechnungen erfordert, würde ich es möglichst vermeiden, das für jedes Element zu prüfen. Auf die Scrollposition reagieren (scroll-Event) und prüfen, ob gewisse Elemente oder Schwellwerte erreicht wurden, ist auch einfacher möglich.
Mathias
Om nah hoo pez nyeetz, molily!
Da das ziemlich viele Berechnungen erfordert, würde ich es möglichst vermeiden, das für jedes Element zu prüfen.
Es reichen ja die Sprungmarken.
Matthias
Meine Herren,
Ich möchte den jeweiligen Link, zu dessen Bereich ich gerade gesprungen bin, verändern (zB deaktivieren oder sein optisches Erscheinungsbild verändern.
Das ist mit CSS nicht möglich. Möglichkeiten den angeklickten Link zu verändern hast du mit JS. Analog zu diesem Beispiel: https://forum.selfhtml.org/?t=214999&m=1471896
Irgendwann in ferner,ferner Zukunft, können wir vielleicht folgendes machen:
a!/href/:target
CSS Selectors Level4
Das wäre ein a-Element, dessen href-Attribut mit der id, des Elements übereinstimmt, dessen id wiederum mit dem Fragment in der Adressezeile übereinstimmt.
Ich kann aber nicht mit Sicherheit sagen, ob der obige Selektor wirklich funktionieren würde. Die führende Raute im href-Attribut ist glaube ich problematisch.
Erst habe ich noch an :local-link gedacht, aber die Pseudoklasse scheint nur den Pfad, nicht aber das Fragment eines URLs zu berücksichtigen.