Parallax Scroll - scroll to a specified div

Question

I've setup a parallax effect using 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>

At the moment, the 'main' div scrolls to the top of the body, but is there a way I can get it to stop when it hits the 'header' tag?

I do hope that makes sense. Thanks for reading, appreciate your advice.

Answer 1

Do you mean something like this?

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>

I moved the header outside the fold and gave it a higher z-index.

EDIT

Updated to match criteria

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>

I've made the height of main be the same a the page height minus the height of the header. Using calc