JSFiddle - React, Tailwind, and code Playground

by NexGenUA

HTML

<div class="other"></div>
    <div class="wraper">
      <div class='low-content'>
        <div id='low-content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit libero, quo quibusdam illum deleniti laborum dicta voluptates aut culpa quaerat, vel nihil illo aperiam commodi eveniet facilis ab, fugiat repellat deserunt quia! Maxime error velit similique quod vero voluptatibus sequi nisi officia.</div>
      </div>
      <div id='large-content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto esse possimus delectus nesciunt vel praesentium explicabo, blanditiis nostrum. Vitae aperiam, saepe deleniti quasi delectus ab magnam nostrum, temporibus maxime architecto quia rerum, quos, quaerat consectetur! Quae harum, nostrum iusto numquam accusamus unde ad magni aperiam facere quisquam laudantium. Repellat, quidem.</div>
   </div>
   <div class="other"></div>

CSS

*{
	font-family: "Verdana";
  font-size: 30px;
}

.wraper {
  display: flex;
}

.low-content {
  width: 400px;
  height: 1000px;
  
}

#low-content {
  width: 400px;
  height: 500px;
  background: coral;
}

#large-content{
  background: green;
  width: 400px;
  height: 1000px;
}

.other {
  height: 1000px;
  width: 800px;
  background: yellow;
}

JavaScript

const lc = document.querySelector('#low-content');
const child = document.querySelector('#large-content')

const fixed = () => {
  const positionTop = child.getBoundingClientRect().top
  const positionBottom = child.getBoundingClientRect().bottom
  if (positionTop > 0) {
    lc.style.position = '';
    lc.style.top = '';
  }
  if (positionTop <= 0) {
    lc.style.position = 'fixed';
    lc.style.top = 0;
    lc.style.marginTop = '';
  }
  if (positionBottom <= lc.offsetHeight) {
    lc.style.position = '';
    lc.style.marginTop = `${child.offsetHeight - lc.offsetHeight}px`;
  }
}

document.addEventListener('scroll', fixed)