Parallax Scroll - blättern Sie zu einem bestimmten div

Question

I Setup haben eine Parallaxe-Effekt mit CSS: JS Fiddle

Code:

body { 
 
    margin: 0px; 
 
} 
 
header { 
 
    height: 218px; 
 
    background: blue; 
 
} 
 
#fold { 
 
    background: red; 
 
    height: 100vh; 
 
    width: 100%; 
 
    position: fixed; 
 
} 
 
main { 
 
    background: green; 
 
    position: relative; 
 
    top: 100vh; 
 
    height: 1000px; 
 
}

<div id="fold"> 
 
    <header>header</header> 
 
    fold content 
 
</div> 
 
<main>main content here</main>

Im Moment der ‚Haupt 'div scrollt an den Anfang des Körpers, aber gibt es einen Weg, wie ich es stoppen kann, wenn es das' header 'Tag trifft?

Ich hoffe, dass das Sinn macht. Vielen Dank für das Lesen, schätzen Sie Ihren Rat.

Answer 1

Meinst du sowas?

body { 
 
    margin: 0; 
 
} 
 
#fold, 
 
header { 
 
    width: 100%; 
 
    position: fixed; 
 
} 
 
header { 
 
    height: 218px; 
 
    background: #00f; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
#fold { 
 
    background: red; 
 
    height: calc(100vh - 218px); 
 
    top: 218px; 
 
} 
 
main { 
 
    background: green; 
 
    position: relative; 
 
    top: 100vh; 
 
    height: 1000px; 
 
}

<header>header</header> 
 
<div id="fold">fold content</div> 
 
<main>main content here</main>

zog ich den Header außerhalb der Falte und gab es einen höheren Z-Index.

EDIT

Kriterien aktualisiert passen

body { 
 
    margin: 0px; 
 
} 
 
header { 
 
    height: 218px; 
 
    background: blue; 
 
} 
 
#fold { 
 
    background: red; 
 
    height: 100vh; 
 
    width: 100%; 
 
    position: fixed; 
 
} 
 
main { 
 
    background: green; 
 
    position: relative; 
 
    top: 100vh; 
 
    height: calc(100vh - 218px); 
 
}

<div id="fold"> 
 
    <header>header</header> 
 
    fold content 
 
</div> 
 
<main>main content here</main>

ich die Höhe des Hauptes eine der Seitenhöhe minus der Höhe des Kopfes gleich sein gemacht habe. Mit calc