JSFiddle - React, Tailwind, and code Playground

by Josh Krauth-Harding

HTML

<div id="scroll-msg">
  Scroll down
</div>
<div id="makescroll"></div>

CSS

#makescroll {
  width: 50px;
  height: 2000px;
  background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%);
}

#scroll-msg {
  display: block;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  transition: opacity 0.25s;
}

JavaScript

const scrollMessage = document.getElementById("scroll-msg");
window.addEventListener("scroll", (e) => {
  if (window.scrollY >= 100) {
    scrollMessage.style.opacity = "0";
  } else {
    scrollMessage.style.opacity = "100";
  }
});