position: sticky

index.html

<div class="content">
    <h1>So <code>position: sticky</code> is a thing now in a <em>bunch</em> of browsers.</h1>
    
    <p><a href="https://caniuse.com/#search=position%3A%20sticky" target="_blank">https://caniuse.com/#search=position%3A%20sticky</a></p>
  
  <p><a href="https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit" target="_blank">https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit</a></p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lectus lectus, adipiscing molestie accumsan ut, facilisis at massa. Praesent ut dictum massa. Sed vel nunc nec augue vestibulum consectetur ac mattis elit. Proin euismod cursus cursus. Sed ut aliquet lectus. Fusce pellentesque pretium massa, ut gravida elit sagittis sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at augue justo. In mollis hendrerit eleifend. Aenean ultricies auctor velit nec luctus. Sed vel tortor nulla. Donec ultrices ligula at eros placerat viverra fringilla massa ultricies. Cras venenatis cursus velit, at varius lectus fermentum ut. Praesent pulvinar neque at magna gravida faucibus. In lectus nibh, fermentum sit amet molestie nec, fringilla non mi. Donec nulla tortor, molestie sed malesuada id, feugiat at magna.</p>
    
    <dl>
      <dt>Title 1</dt>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dt>Title 2</dt>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dt>Title 3</dt>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
      <dd>Lorem ipsum dolor sit amet</dd>
   </dl>

<p>Sed malesuada, metus et tincidunt cursus, metus est egestas lorem, sit amet scelerisque augue purus nec sem. Morbi et euismod nulla. Vivamus sit amet justo erat, et varius arcu. Cras in suscipit justo. Nam vitae sollicitudin augue. Aenean non eros justo. Sed porta, nisi ac sollicitudin sollicitudin, massa ante vehicula arcu, id vehicula neque mauris vitae nisl.</p>
    
    <h2 class="sticky">Aenean non eros justo</h2>

<p>Nunc eget faucibus ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ipsum mauris, sit amet faucibus justo. Vivamus nulla arcu, tempus et condimentum et, vulputate pretium diam. Maecenas condimentum cursus purus laoreet mollis. Nullam vel tortor non augue suscipit pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lacinia laoreet arcu, ac faucibus ipsum condimentum eget. Cras nec dolor eget dolor fringilla rutrum et eget risus. In libero massa, pretium a ultricies ac, mollis a erat. Donec sit amet urna risus. Praesent id ligula diam, bibendum ullamcorper lectus. Ut facilisis nisi id turpis posuere porttitor. Curabitur sed tellus eros, vel sollicitudin justo.</p>

        <h3>Donec quis ligula vitae lorem convallis dignissim</h3>

<p>Vivamus tristique pulvinar lacus, eu facilisis dolor fringilla et. Donec quis ligula vitae lorem convallis dignissim. Aenean consectetur accumsan iaculis. Donec ultricies, tellus id scelerisque scelerisque, justo purus fermentum sem, sit amet ultricies ante lorem in est. Proin laoreet diam id ante congue bibendum. Vivamus nisi nulla, mollis nec congue ut, mattis pulvinar tortor. In sit amet est id mauris molestie tempor at sed lectus. In tempus, quam placerat consequat dictum, purus magna condimentum velit, id rutrum sem metus sed ante. In a ante non mi blandit blandit et eget enim. Nullam cursus sem id tellus dignissim eget vulputate sem aliquam. Praesent a tellus arcu. Donec id magna ac arcu adipiscing volutpat in sed urna.</p>

    <h2 class="sticky">Fusce enim ligula</h2>
    
<p>Vestibulum lobortis sem vel nisl eleifend eleifend. Morbi et est sed mauris pellentesque interdum et vel mauris. Fusce enim ligula, molestie et cursus quis, consectetur eget massa. Nam a felis at massa vehicula mollis vel eu sapien. Nunc eget sapien diam. Maecenas libero dolor, lobortis et lacinia sed, eleifend vel velit. Nam feugiat auctor dignissim. Aliquam erat volutpat. Phasellus in orci elit, non convallis metus. Duis ultrices, turpis in eleifend pellentesque, ipsum arcu scelerisque purus, quis fermentum enim tellus aliquam est. Praesent tempus odio id est pharetra ullamcorper. Nunc non justo libero, ut consectetur tellus. Fusce eget dolor non neque vehicula elementum vitae eu mauris. Nullam malesuada aliquam dolor sed elementum.</p>
    
    <h3>Aliquam lectus lectus</h3>

      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lectus lectus, adipiscing molestie accumsan ut, facilisis at massa. Praesent ut dictum massa. Sed vel nunc nec augue vestibulum consectetur ac mattis elit. Proin euismod cursus cursus. Sed ut aliquet lectus. Fusce pellentesque pretium massa, ut gravida elit sagittis sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at augue justo. In mollis hendrerit eleifend. Aenean ultricies auctor velit nec luctus. Sed vel tortor nulla. Donec ultrices ligula at eros placerat viverra fringilla massa ultricies. Cras venenatis cursus velit, at varius lectus fermentum ut. Praesent pulvinar neque at magna gravida faucibus. In lectus nibh, fermentum sit amet molestie nec, fringilla non mi. Donec nulla tortor, molestie sed malesuada id, feugiat at magna.</p>

        <h2 class="sticky">Cras in suscipit justo</h2>

<p>Sed malesuada, metus et tincidunt cursus, metus est egestas lorem, sit amet scelerisque augue purus nec sem. Morbi et euismod nulla. Vivamus sit amet justo erat, et varius arcu. Cras in suscipit justo. Nam vitae sollicitudin augue. Aenean non eros justo. Sed porta, nisi ac sollicitudin sollicitudin, massa ante vehicula arcu, id vehicula neque mauris vitae nisl.</p>

    <h3>Duis nec ipsum</h3>
<p>Nunc eget faucibus ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ipsum mauris, sit amet faucibus justo. Vivamus nulla arcu, tempus et condimentum et, vulputate pretium diam. Maecenas condimentum cursus purus laoreet mollis. Nullam vel tortor non augue suscipit pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lacinia laoreet arcu, ac faucibus ipsum condimentum eget. Cras nec dolor eget dolor fringilla rutrum et eget risus. In libero massa, pretium a ultricies ac, mollis a erat. Donec sit amet urna risus. Praesent id ligula diam, bibendum ullamcorper lectus. Ut facilisis nisi id turpis posuere porttitor. Curabitur sed tellus eros, vel sollicitudin justo.</p>

            <h3>Vivamus tristique</h3>

<p>Vivamus tristique pulvinar lacus, eu facilisis dolor fringilla et. Donec quis ligula vitae lorem convallis dignissim. Aenean consectetur accumsan iaculis. Donec ultricies, tellus id scelerisque scelerisque, justo purus fermentum sem, sit amet ultricies ante lorem in est. Proin laoreet diam id ante congue bibendum. Vivamus nisi nulla, mollis nec congue ut, mattis pulvinar tortor. In sit amet est id mauris molestie tempor at sed lectus. In tempus, quam placerat consequat dictum, purus magna condimentum velit, id rutrum sem metus sed ante. In a ante non mi blandit blandit et eget enim. Nullam cursus sem id tellus dignissim eget vulputate sem aliquam. Praesent a tellus arcu. Donec id magna ac arcu adipiscing volutpat in sed urna.</p>

                <h2 class="sticky">Nam feugiat auctor</h2>

<p>Vestibulum lobortis sem vel nisl eleifend eleifend. Morbi et est sed mauris pellentesque interdum et vel mauris. Fusce enim ligula, molestie et cursus quis, consectetur eget massa. Nam a felis at massa vehicula mollis vel eu sapien. Nunc eget sapien diam. Maecenas libero dolor, lobortis et lacinia sed, eleifend vel velit. Nam feugiat auctor dignissim. Aliquam erat volutpat. Phasellus in orci elit, non convallis metus. Duis ultrices, turpis in eleifend pellentesque, ipsum arcu scelerisque purus, quis fermentum enim tellus aliquam est. Praesent tempus odio id est pharetra ullamcorper. Nunc non justo libero, ut consectetur tellus. Fusce eget dolor non neque vehicula elementum vitae eu mauris. Nullam malesuada aliquam dolor sed elementum.</p>
</div>

position-sticky.markdown

position: sticky

A Pen by HigherEducation.com on CodePen.

License.

style.scss

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

code {
  background-color: AliceBlue;
  padding: 0 7px;
}

h2 {
  background-color: DarkTurquoise;
  padding: 5px 40px;
  margin-left: -40px;
  width: 100%;
}


.content {
  padding: 20px 40px;
}

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 0;
}

dt {
  background-color: Silver;
  display: block;
  padding: 2px 0 2px 10px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}