JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro consequatur quos unde magni, optio amet ex facilis pariatur labore aspernatur, est exercitationem asperiores quam iste at cum tempore nulla neque!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis perferendis alias, ab totam repudiandae voluptatem at libero illum ea est.
  </p>
  <div class="sidebar">
    sidebar
  </div>
  <div class="number">
    0
  </div>
</div>

CSS

.wrap {
  position: relative;
  height: 3000px;
  margin: 0 30px;
}
.sidebar {
  position: absolute;
  top: 80px;
  left: 0;
  padding: 10px;
  background: #000000;
  color: #eeeeee;
}
.active {
  background: #eeeeee;
  color: #444444;
}

.number {
  position: fixed;
  top: 0px;
  right: 0;
  width: 100px;
  border: 1px solid red;
}

JavaScript

const sidebar = document.querySelector('.sidebar');
const number = document.querySelector('.number');
const initTop = sidebar.getBoundingClientRect().top;

window.addEventListener('scroll', function(){
	let sidebarTop = sidebar.getBoundingClientRect().top;
  let scrollPos = window.scrollY;
  if(scrollPos > initTop) {
  	sidebar.classList.add('active');
   sidebar.style.top = scrollPos + "px";
  } else if(scrollPos < initTop) {
  	sidebar.classList.remove('active');
    sidebar.style.top = initTop + "px";
  }
  number.innerHTML = scrollPos;
  
  
})