JSFiddle - React, Tailwind, and code Playground

Position sticky "event" using Intersection Observer

by Travis Almand

HTML

<p>Start scrolling to see the h2 of each section become sticky.</p>
<p>Once a title is sticky its appearance will change.</p>

<section>
  <h2 class="top">section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur lacus mi, vitae iaculis neque egestas id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi risus ligula, pharetra vulputate lacinia ac, fermentum eget lorem. Nam ac dictum erat. Donec vitae nibh vehicula, consequat lorem id, aliquam leo. Nullam pretium varius semper. Etiam id eleifend urna, ac fringilla orci. Proin maximus a urna ac finibus. Proin nibh augue, congue ut turpis eu, vehicula aliquet ipsum.</p>
  <p>Pellentesque suscipit malesuada mauris, vitae elementum dolor placerat et. Integer mi diam, iaculis quis varius ut, pretium a justo. Morbi in pretium massa, et volutpat sapien. Quisque imperdiet dapibus diam, id accumsan lectus posuere eget. In venenatis porta est, sit amet cursus lorem sodales quis. In aliquet aliquam turpis sit amet efficitur. Sed fringilla massa facilisis egestas placerat. Ut et enim id libero fermentum ornare at ut lorem. Vestibulum pulvinar ullamcorper accumsan. Integer scelerisque nisi id mauris iaculis venenatis. Nunc sodales orci eu egestas auctor. Duis lobortis, orci in egestas condimentum, velit dolor aliquet nibh, in pharetra nibh eros vitae urna.</p>
   <p>Phasellus varius pretium arcu sed ullamcorper. Duis id mi viverra, scelerisque justo sed, ultricies mi. Morbi nisl mi, maximus dignissim quam volutpat, faucibus hendrerit erat. Suspendisse aliquet mollis est at consequat. Aenean semper sagittis leo at scelerisque. Nullam vehicula pharetra neque in finibus. Ut dignissim fermentum turpis, eu vulputate urna commodo eget. Donec justo eros, interdum porttitor risus gravida, ornare vulputate nibh.</p>
   <p>Integer dictum placerat quam, vitae semper risus convallis at. Praesent consequat orci a vulputate scelerisque. Nulla dictum enim...

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  height: 100vh;
  margin: 0;
  overflow: auto;
  padding: 0;
}

section {
  
  h2,
  h3{
    background-color: rgba(255, 255, 255, 0);
    color: #333;
    margin: 10px 10px 20px;
    padding: 10px 0;
    position: sticky;
    transition: 0.25s;
    
    &.sticky {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding-left: 40px;
    }
  }
  
  .top {
    top: 0;
  }
  
  .bottom {
    bottom: 20px;
  }
}
p {
  margin: 10px;
}

.buffer {
  height: 100vh;
}

JavaScript

console.clear();

let tops = document.querySelectorAll('.top');
let top_options = {
	root: document.body,
  rootMargin: '0px 0px -100% 0px',
  threshold: 0
};
let top_observer = new IntersectionObserver(top_callback, top_options);

tops.forEach(element => {
	top_observer.observe(element);
});

function top_callback (entries, observer) {
	entries.forEach(entry => {
  	entry.target.classList.toggle('sticky', entry.isIntersecting);
  });
}

let bottoms = document.querySelectorAll('.bottom');
let bottom_pptions = {
	root: document.body,
  rootMargin: `-${document.body.clientHeight - 20}px 0px 0px 0px`,
  threshold: 0
}
let bottom_observer = new IntersectionObserver(bottom_callback, bottom_pptions);

bottoms.forEach(element => {
	bottom_observer.observe(element);
});

function bottom_callback (entries, observer) {
	entries.forEach(entry => {
  	entry.target.classList.toggle('sticky', entry.isIntersecting);
  });
}