I am trying to recreate the scrolling behavior of this page.
Basically there are two scrollable columns above the fold, but one's scroll depth needs to be limited by/related to the current scroll depth of the other column. If you reach X pixels of scrolldepth on #scrollOne, then #scrollTwo should scroll up to a certain scrollDepth and then stop scrolling.
I have two divs inside of one grid container:
<div class="container">
<div id="scrollOne" class="scrollable">{....content....}</div>
<div id="scrollTwo" class="scrollable">{....content....}</div>
</div>
<div>....other content below...</div>
And the following CSS:
.container {
overflow: hidden;
}
.scrollable {
overflow-y: scroll;
height: 75vh;
scrollbar-width: none;
}
This all works as I would like, except that I am unable to get the two divs to move with each other when needed. Any help or insight would be greatly appreciated.
You can achieve this with a sticky position.
*{
padding: 0px; margin: 0px; font-family: sans-serif; box-sizing: border-box;
}
.container {
position: relative;
}
section, aside{
display: inline-block;
float: left;
padding: 20px;
}
section{
width: 60%;
border-right: 1px solid #afafaf;
}
aside{
margin-top: 100px;
position: -webkit-sticky;
position: sticky;
border-bottom: 1px solid #afafaf;
top: 0px;
width: 40%;
}
.clear-prefix {
content: '';
display: block;
clear: both;
}<div class="container">
<section>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<aside>Aside</aside>
<div class="clear-prefix"></div>
</div>