Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14835, member: 3917"]
Hallo Dennis und willkommen im Forum!
[ICODE]position:sticky[/ICODE] dürfte dir helfen, das Problem zu lösen:
[URL]https://www.mediaevent.de/css/position-sticky.html[/URL]

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>[/CODE]
[/QUOTE]

Authentifizierung