JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="parent">
<div class="side">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!
</div>
<div class="content">
yo  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facilis minus vitae eius maiores in deleniti architecto nam, ab facere repudiandae suscipit saepe at, tempora neque quos quaerat. Ipsam, atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis...

CSS

.parent {
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: flex-start;
}

.side {
display:block;
background: tomato;
top: 0;
width: 50%;
}

.visible .side {
background: green;
position: sticky;
}

.content {
  width: 50%;
}

JavaScript

// define an observer instance
var observer = new IntersectionObserver(onIntersection, {
  root: null,   // default is the viewport
  threshold: 1 // percentage of target's visible area. Triggers "onIntersection"
})

var bodyTag = document.querySelector('body');

// callback is called on intersection change
function onIntersection(entries, opts){
  entries.forEach(entry =>  
    bodyTag.classList.toggle('visible', entry.isIntersecting)
  )
}

// Use the observer to observe an element
observer.observe( document.querySelector('.side') )

// To stop observing:
// observer.unobserve(entry.target)