Sticky Transition

by Luckypouet

HTML

<div class="spacer"></div>
<div class="container">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam delectus suscipit veritatis optio quisquam debitis nihil nisi impedit inventore repellendus officia dolore tempore in officiis dignissimos nemo, ea natus repellat!</div>
  <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quam, ipsam, harum beatae sequi neque hic voluptas culpa, ad officiis suscipit tempora tenetur ducimus itaque veniam saepe. Nesciunt, officia voluptas.</div>
</div>
<div class="spacer"></div>

CSS

.spacer{
  height: 50vh;
}
.spacer ~ .spacer{
  height: 200vh;
}
.container{
  display: flex;
  border: 1px dotted red;
}
.left{
  position: relative;
  padding: 10px;
  width: 75%;
  border: 1px dotted black;
  background: #FFC;
  height: 400vh;
}
.right{
  width: 25%;
  position: sticky;
  top: 0;
  align-self: flex-start;
  padding: 10px;
  height: 150vh;
  background: #CFC;
  border: 1px dotted green;
}

.left:after,
.right:after{
  content:'Bottom';
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.invert{
  align-self: flex-end;
  top: auto;
  bottom: 0;
  background: #CFC;
}

JavaScript

const right = document.querySelector('.right');
let previous = document.documentElement.scrollTop;
document.addEventListener('scroll', (e)=>{
  const top = document.documentElement.scrollTop,
  	delta = previous - top;
  previous = document.documentElement.scrollTop;
	right.classList[delta < 0 ? 'add' : 'remove']('invert');
  console.log(right.offsetTop);
});