Scrollytelling with position sticky

index.html

<h1>Scrollytelling with position: sticky</h1>

<section>
  
  <figure>
    <p>A sticky item</p>
  </figure>
  
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</p>
    
    <p>Integer accumsan interdum justo eu pretium. Aliquam maximus mi sit amet dapibus efficitur.</p>
    
    <p>Sed condimentum lacus sit amet turpis aliquam varius nec a lacus. In facilisis convallis ante sit amet consequat. Aenean a lorem mollis, bibendum nibh nec, maximus orci. Nulla facilisi.</p>
  </article>
  
</section>

<section>
  
  <figure>
    <p>A second sticky item</p>
  </figure>
  
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</p>
    
    <p>Integer accumsan interdum justo eu pretium. Aliquam maximus mi sit amet dapibus efficitur.</p>
    
    <p>Sed condimentum lacus sit amet turpis aliquam varius nec a lacus. In facilisis convallis ante sit amet consequat. Aenean a lorem mollis, bibendum nibh nec, maximus orci. Nulla facilisi.</p>
  </article>
  
</section>

<section>
  
  <figure>
    <p>A third fixed item</p>
  </figure>
  
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</p>
    
    <p>Integer accumsan interdum justo eu pretium. Aliquam maximus mi sit amet dapibus efficitur.</p>
    
    <p>Sed condimentum lacus sit amet turpis aliquam varius nec a lacus. In facilisis convallis ante sit amet consequat. Aenean a lorem mollis, bibendum nibh nec, maximus orci. Nulla facilisi.</p>
  </article>
  
</section>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</p>
    
    <p>Integer accumsan interdum justo eu pretium. Aliquam maximus mi sit amet dapibus efficitur.</p>
    
    <p>Sed condimentum lacus sit amet turpis aliquam varius nec a lacus. In facilisis convallis ante sit amet consequat. Aenean a lorem mollis, bibendum nibh nec, maximus orci. Nulla facilisi.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</p>
    
    <p>Integer accumsan interdum justo eu pretium. Aliquam maximus mi sit amet dapibus efficitur.</p>
    
    <p>Sed condimentum lacus sit amet turpis aliquam varius nec a lacus. In facilisis convallis ante sit amet consequat. Aenean a lorem mollis, bibendum nibh nec, maximus orci. Nulla facilisi.</p>

scrollytelling-with-position-sticky.markdown

Scrollytelling with position sticky

A Pen by Elaina Natario on CodePen.

License.

style.scss

$top-offset: 3rem;
$bp: 35rem;

body {
  background-color: ghostwhite;
  margin: $top-offset auto;
  max-width: 60rem;
}

h1 {
  text-align: center;
  margin-bottom: 3rem;
}

section {
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
  
  @media screen and (min-width: $bp) {
    flex-direction: row;
  }
  
  > * {
    flex: 1;
  }
}

article {
  padding: 0 1rem;
  
  p {
    font-family: Georgia;
    font-size: 1.1rem;
    line-height: 1.8;
    
    @media screen and (min-width: $bp) {
      margin: 0;
    }
    
    &:not(:last-of-type) {
      @media screen and (min-width: $bp) {
       min-height: 90vh; 
      } 
    }
  }
}

figure {
  align-items: center;
  align-self: flex-start;
  background-color: #DAF7A6;
  display: flex;
  height: 10rem;
  margin: 0;
  width: 100%;
  justify-content: center;
  top: $top-offset;
  
  @media screen and (min-width: $bp) {
    position: sticky;
  }
}