Probleme mit Anker-setzen (gelöst)

denniswolfra · 02.10.2024

Hallo,
meine Webseite läuft mit Wordpress. Dort verwende ich das Twenty Twenty-Four-Theme.
Für z.B. längere Blogbeiträge/Seiten habe ich mir eine Vorlage erschaffen, wo ich eine Art zweiten und oben hängenden Header (/div) einfügen kann.
Dieser "Fake-Header" beinhaltet sozusagen das Inhaltsverzeichnis ("Übersicht & Beitragsoptionen") dieser Seite bzw. des Beitrags in Form von Links zu Anker im Blogbeitrag bzw. auf dieser Seite. Dazu passend hat jeder Abschnitt (Kapitel) seinen jeweiligen Anker. So kann der Leser innerhalb des Blogbeitrags gezielt (hoch/runter) navigieren.

Zum Problem:
je nach dem wie viele Links ich zu Ankern in diesen Fake-Header anlege bzw. hinzufüge, wird der Fake-Header ("Übersicht & Beitragsoptionen") in der Höhe größer bzw. kleiner. Das hat zur Konsequenz das mein folgender zusätzlicher CSS Eintrag nicht (immer) funktioniert:

/* Standardwert für Desktops und größere Bildschirme */
.anker {
scroll-margin-top: 58px;
}

/* Für Bildschirme mit einer maximalen Breite von 768px (typisch für mobile Geräte, inkl. iPhone) */
@media (max-width: 768px) {
.anker {
scroll-margin-top: 58px;
}
}

Mein Ziel:
Die Unterkante meines Fake-Headers (Übersicht & Beitragsoptionen) soll immer bündig über den Anker(-Punkt) landen bzw. soll der Ankerpunkt immer bündig unter der Kante das Fake-Headers landen und das UNABHÄNGIG wie groß bzw. schmal der Fake-Header ist.

Ich hab jetzt eine Woche rum probiert und komme nicht voran. Kennt jemand eine "Saubere Lösung"?

LG Dennis

Sempervivum · 02.10.2024

Hallo Dennis und willkommen im Forum!
position:sticky dürfte dir helfen, das Problem zu lösen:
https://www.mediaevent.de/css/position-sticky.html

Edit: Nach weiterer Überlegung komme ich zu dem Schluss, dass "position: sticky" das Problem nicht lösen wird. Wahrscheinlich musst Du den Wert des "scroll-margin-top" mit Javascript berechnen.

Edit2: Ich habe in meinen Demos gesucht und dies gefunden, das ohne Javascript und ohne feste Abmessungen der Navigation funktioniert. Versuche, ob Du es auf deine Seite übertragen kannst.

Code:

<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>Onepager</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            /* Arrange items inside one below each other: */
            display: flex;
            flex-direction: column;
        }

        section {
            /* Just for testing */
            height: 150vh;
        }

        #section1 {
            background-color: lightblue;
        }

        #section2 {
            background-color: lightsalmon;
        }

        #section3 {
            background-color: bisque;
        }

        header {
            /* Header's height should be fixed to 150px */
            flex: 0 0 150px;
            background-color: green;
            color: white;
        }

        nav {
            /* Height should be set according content: */
            flex: 0 0 auto;
        }

        nav ul {
            padding: 0;
            /* Items inside should be arranged
            side by side: */
            display: flex;
            justify-content: space-around;
            list-style-type: none;
        }

        main {
            /* Main should take the remaining space: */
            flex: 1;
            overflow: auto;
        }

        section h2 {
            /* Prevent collapsing margins by using
            padding instead of margin: */
            margin: 0;
            padding: 0.5em;
        }
    </style>

</head>


<body>
    <header>
        This is the header, logo and some links here
    </header>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>
    <main>
        <section id="section1">
            <h2>Headline for section 1</h2>
        </section>
        <section id="section2">
            <h2>Headline for section 2</h2>
        </section>
        <section id="section3">
            <h2>Headline for section 3</h2>
        </section>
    </main>
</body>

</html>

denniswolfra · 02.10.2024

Hallo und Dank für die zügige Antwort.
ich denke ich hab mich nicht klar ausgedrückt. Ich würde ja hier ein Link rein packen, aber die Funktion ist für Neulinge gesperrt.
Wenn man auf meine Webseite https: // Dennis - wolfram . de geht und auf der Startseite den Blogbeitrag "iVenyl, Plattenspiler mit Airplay oder einfach AirChord" anklickt, kann man sich das bisherige Ergebnis/Verhalten live ansehen. Alternativ hier ein paar Screenshots:

Bildschirmfoto 2024-10-02 um 22.32.16.png

Bildschirmfoto 2024-10-02 um 22.35.22.png

Bildschirmfoto 2024-10-02 um 22.43.46.png

Ziel sollte es sein den scroll-margin-top: ___px; mit einer variablen und nicht mit einer feste Größe ins eigene CSS einzutragen. Ich dachte da an die CSS-Eigenschaft calc(), habe aber kein Plan wie ich das angehen soll/kann. In Wordpress kann ich ja keine IDs den Objekten(div) zuweisen. Ich habe nur die Möglichkeit eine eigen CSS Klasse zuzuordnen.

Meine Idee scroll-margin-top: calc(Höhe des Fake-Header)px
Wie gesagt: ich kann jedem Objekt (Fake-Header)t nur CSS Klassen zuweisen. Und in Wordpress ein eigenes CSS anlegen.

NOCHMALS Danke

LG Dennis

Sempervivum · 03.10.2024

Ich denke schon, dass ich das Problem richtig verstehe. Allerdings ist es wahrscheinlich nicht realistisch machbar, mein Verfahren mit dem Onepager auf eine Wordpress-Seite zu übertragen.

Meine Idee scroll-margin-top: calc(Höhe des Fake-Header)px

Die Idee ist schon richtig, allerdings ist mir kein Weg bekannt, wie man ohne Javascript dynamisch die Höhe dieses Headers ermitteln kann.
Ich habe das mal mit den Entwicklerwerkzeugen ausprobiert und es funktioniert für #Was-wird-benötigt und #Zusammengefasst einwandfrei. Bei #Schalplatten&HomePod meckert Javascript, dass es ein unzulässiger Selektor sei.

Code:

        function adjustScroll() {
            const
                nav = document.querySelector('.nav'),
                box = nav.getBoundingClientRect(),
                hNav = box.height,
                scrollingEle = document.getElementById('Was-wird-benötigt'),
                scrollPos = window.scrollY;
            console.log(hNav, scrollPos);
            scrollingEle.style.scrollMarginTop = (hNav) + 'px';
        }
        adjustScroll();
        document.addEventListener('scroll', adjustScroll);
        function adjustScroll2() {
            const
                nav = document.querySelector('.nav'),
                box = nav.getBoundingClientRect(),
                hNav = box.height,
                scrollingEle = document.getElementById('Zusammengefasst'),
                scrollPos = window.scrollY;
            console.log(hNav, scrollPos);
            scrollingEle.style.scrollMarginTop = (hNav) + 'px';
        }
        adjustScroll2();
        document.addEventListener('scroll', adjustScroll2);

Dazu muss dieser Fake-Header die Klasse "nav" bekommen.
Braucht natürlich noch Überarbeitung, die Zuweisung des scrollMarginTop macht man besser mit einer Schleife und man muss sie auch machen, wenn der Fake-Header auf oder zu geklappt wird.

denniswolfra · 03.10.2024

Erst mal bzw. nochmals DANKE.
Vielleicht meckert er bei #Schalplatten&HomePod wegen dem "&".

Sempervivum schrieb:
scrollingEle = document.getElementById('Was-wird-benötigt'),

Der HTML-Anker bzw. die ID ('Was-wird-benötigt') wird ja individuell vom Autor passend zum dem jeweiligen Blogbeitrag im Gutenberg-Editor eingetragen. Wenn d. ID im JS fest zugeordnet wird, muss ja der Autor, der keine Ahnung von CSS/JS hat, das Script jedes mal anpassen. Oder check ich was nicht/falsch?

Kann ich das Javascript direkt in meine gebastelte Vorlage "Übersicht & Beitragsoptionen" (Fake-Header) rein machen oder muss das in die Seiten-Vorlage (Blogbeitrag)? Siehe Bild:

Geht das nicht mit relativen Größen (%,rel,vh) direkt im CSS: www . html-seminar . de / berechnungen-in-css-mit-calc . htm

Alternativ denke ich mir eine unsaubere "in case of Logik":

.anker-1-zeiliger-Header {
scroll-margin-top: 58px;
}

.anker-2-zeiliger-Header {
scroll-margin-top: 108px;
}

.anker-3-zeiliger-Header {
scroll-margin-top: 158px;
}

@media (max-width: 768px) {
.anker-1-zeiliger-Header {
scroll-margin-top: 58px;
}

.anker-2-zeiliger-Header {
scroll-margin-top: 108px;
}

.anker-3-zeiliger-Header {
scroll-margin-top: 158px;
}
}
usw.

So muss der Autor nur .anker-1/2/3-zeiliger-Header als CSS Klasse auswählen.

denniswolfra · 03.10.2024

Sempervivum schrieb:
Ich denke schon, dass ich das Problem richtig verstehe. Allerdings ist es wahrscheinlich nicht realistisch machbar, mein Verfahren mit dem Onepager auf eine Wordpress-Seite zu übertragen.

Die Idee ist schon richtig, allerdings ist mir kein Weg bekannt, wie man ohne Javascript dynamisch die Höhe dieses Headers ermitteln kann.
Ich habe das mal mit den Entwicklerwerkzeugen ausprobiert und es funktioniert für #Was-wird-benötigt und #Zusammengefasst einwandfrei. Bei #Schalplatten&HomePod meckert Javascript, dass es ein unzulässiger Selektor sei.

Code:

function adjustScroll() { const nav = document.querySelector('.nav'), box = nav.getBoundingClientRect(), hNav = box.height, scrollingEle = document.getElementById('Was-wird-benötigt'), scrollPos = window.scrollY; console.log(hNav, scrollPos); scrollingEle.style.scrollMarginTop = (hNav) + 'px'; } adjustScroll(); document.addEventListener('scroll', adjustScroll); function adjustScroll2() { const nav = document.querySelector('.nav'), box = nav.getBoundingClientRect(), hNav = box.height, scrollingEle = document.getElementById('Zusammengefasst'), scrollPos = window.scrollY; console.log(hNav, scrollPos); scrollingEle.style.scrollMarginTop = (hNav) + 'px'; } adjustScroll2(); document.addEventListener('scroll', adjustScroll2);

Dazu muss dieser Fake-Header die Klasse "nav" bekommen.
Braucht natürlich noch Überarbeitung, die Zuweisung des scrollMarginTop macht man besser mit einer Schleife und man muss sie auch machen, wenn der Fake-Header auf oder zu geklappt wird.

ChatGPT sagt:

/* Das sticky div */
.sticky-nav {
position: sticky;
top: 0; /* oder z.B. 10px, je nach Layout */
z-index: 1000; /* Wichtig, um sicherzustellen, dass es über den Inhalten bleibt */
background-color: white; /* Optional, je nach Design */
padding: 10px; /* Optional, je nach Design */
}

/* Die Ankerpunkte */
.section {
scroll-margin-top: calc(var(--sticky-height, 0px) + 20px); /* 20px als zusätzlicher Abstand, anpassbar */
}

/* Um die sticky-Höhe dynamisch zu bestimmen, ein kleiner Trick mit CSS-Variablen */
.sticky-nav {
--sticky-height: calc(100px + (1.5em * var(--link-count, 5))); /* Beispielrechnung */
}

Ich bin nur grad zu blöd das an meinem Beispiel umzusetzen.

Sempervivum · 03.10.2024

Es ist ganz schwierig, die Höhe dieses Headers mit CSS zu bestimmen und alle Eventualitäten zu berücksichtigen. Das lässt man besser den Browser machen, der kann es besser.
Etwas weiter ausgearbeitet würde mein Skript so aussehen:

Code:

        function adjustScroll() {
            const
                nav = document.querySelector('.nav'),
                box = nav.getBoundingClientRect(),
                hNav = box.height,
                scrollingElems = document.querySelectorAll('.anchor');
            scrollingElems.forEach(scrollingEle => {
                scrollingEle.style.scrollMarginTop = hNav + 'px';
            });
            console.log(hNav);
        }
        adjustScroll();
        window.addEventListener('resize', adjustScroll);

Relativ simpel, nicht wahr? Dazu musst Du dem Header die Klasse "nav" und den Ankern jeweils die Klasse "anchor" verpassen.
Habe ich wieder für die ersten drei Elemente in den Entwicklerwerkzeugen gemacht und es hat einwandfrei funktioniert.
Was noch fehlt ist, das Aufklappen zu berücksichtigen. Versuche erst Mal, das so zu übernehmen und dann kümmern wir uns darum.

denniswolfra · 03.10.2024

Ok. Deinen Code: kann ich den als "Individuelles HTML" in meine Fake-Header-Vorlage packen (vgl. Bild unten) oder muss ich an den Kern (Wordpress-Dashboard » Werkzeuge » Theme-Datei-Editor » Themen-Funktionen (functions.php))?

Sempervivum · 03.10.2024

Da kann ich dich jetzt leider nicht groß beraten, da keine Erfahrung mit Wordpress. Wichtig ist, dass das Javascript nach dem HTML für die Nav bzw. den Fake-Header kommt. Versuche es einfach und wenn es nicht funktioniert, müssen wir uns das noch Mal ansehen.

denniswolfra · 03.10.2024

Hab die Lösung/Antwort, dank Chat GPT:

Schriftt 1:
im WordPress Dashboard:
Menü: Werkzeuge » Theme-Datei-Editor » Themen-Funktionen (functions.php)
am ENDE folgenden Code einfügen:

PHP:

function custom_scroll_script() {
    ?>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
          e.preventDefault();

          const targetId = this.getAttribute('href').substring(1);
          const targetElement = document.getElementById(targetId);
          const headerHeight = document.querySelector('.beitrags-header').offsetHeight;

          window.scrollTo({
            top: targetElement.offsetTop - headerHeight,
            behavior: 'smooth'
          });
        });
      });
    });
    </script>
    <?php
}

add_action('wp_footer', 'custom_scroll_script');

Screenshot:

Schritt 2:
im WordPress Dashboard oder direkt im :
Menü: Design » Webseiten-Editor vom Twenty Twenty-Four-Theme » Vorlagen » Meine Vorlagen » "Übersicht & Beitragsoptionen" (mein Fake-Header)
den Block auswählen und bei den Block-Einstellungen unter dem Punkt: Erweitert » ZUSÄTZLICHE CSS-KLASSE(N) "beitrags-header" eingetragen

Screenshot:

IST DAS DEINER MEINUNG NACH SO OK/SAUBER?

Sempervivum · 03.10.2024

ChatGPT ist anscheinend doch nicht so schlecht. Das ist ein anderer Weg, statt das scroll-margin-top auszurechnen, wird das scrollTop berechnet und gesetzt. Ist genau so gut.
Was das Handling mit WP betrifft, kann ich das, wie geschrieben, nicht beurteilen.

denniswolfra · 03.10.2024

Sempervivum schrieb:
ChatGPT ist anscheinend doch nicht so schlecht. Das ist ein anderer Weg, statt das scroll-margin-top auszurechnen, wird das scrollTop berechnet und gesetzt. Ist genau so gut.
Was das Handling mit WP betrifft, kann ich das, wie geschrieben, nicht beurteilen.

Ja, wie auch immer. Ich möchte mich noch mal vom Herzen für deine Anleitungen/Hilfe bedanken. Vielen Dank.

Sempervivum · 03.10.2024

Immer gern, da nicht für. WP ist so ein Kapitel für sich, manches, was nur ein paar Handgriffe mit CSS oder JS ist, gestaltet sich da schwieriger, vor allem wenn man diese Umgebung nicht kennt.

Noremg · 30.10.2024

In diesem Thread gibt es viele Informationen über HTML und CSS in WordPress.

scatello · 30.10.2024

Noremg schrieb:
In diesem Thread gibt es viele Informationen über HTML und CSS in WordPress.

Würdest du bitte mit solchen sinnlosen Beiträgen aufhören. Danke!