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.

scrollmagic.io in particular scrollmagic.io/examples/basic/simple_pinning.html — Paul Thomas
– Paul Thomas, Commented Dec 5, 2016 at 12:56

Andrew Bone · Accepted Answer · 2016-12-05 15:41:13Z

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

edited Dec 5, 2016 at 15:41

answered Dec 5, 2016 at 15:14

Andrew Bone

7,3112 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2538833 Over a year ago

Thanks for your reply. Not quite, i'm not wanting the 'main' tag to go underneath the header, but to stop beneath it. So say for example the header has a height of 400px, im wanting the 'main' to scroll over the fold until it sits beneath the header, stopping at 401px;

Collectives™ on Stack Overflow

Parallax Scroll - scroll to a specified div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related