параллакс прокрутки - выделите указанный DIV

Question

я установки параллакс эффект с помощью CSS: JS Fiddle

Код:

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>

На данный момент «главная 'div прокручивается до верхней части тела, но есть ли способ заставить его остановиться, когда он попадет в тег' header '?

Я действительно надеюсь, что имеет смысл. Спасибо за чтение, оцените ваш совет.

Answer 1

Вы имеете в виду что-то вроде этого?

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>

я переехал заголовок за пределами складки и дал ему более высокий Z-индекс.

EDIT

Обновлено соответствовать критериям

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>

Я сделал высота основной быть таки высота страницы минус высота заголовка. Использование calc