Fragesteller: Linkformatierung location.href mit Hash-Teil

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!

  1. 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

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen rot und Rottweiler.

    1. 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

      1. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Tau und Taucher.

      2. 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

        1. 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

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gas und Gasthof.

    2. 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.