JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

ewr werewr

 wer
 erwe r
 wer
 ewr
 we
 rew
 rw
 er 
 wer
 
 r
 w er 
 we
 rwe
 r
 ewr
  we
  rw
  r
  we
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  vr<p id="tiedye_cta">
  asdsd fdsfdsfsdf sdfdsf sfadsfdsfaf
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  r<p>
  asdsd 
  </p>
  vr<p>
  asdsd 
  </p>
  v
  v
  
  v
  r<p>
  asdsd 
  </p>v

CSS

.show {
      display:block;
}
.hide {
   display:none;
}

JavaScript

window.onload = function() {
  var tiedye_cta = document.getElementById("tiedye_cta");
  tiedye_cta.classList.add("hide");
  tiedye_cta.classList.remove("show");


  var scrollFunc = function() {
    console.log(window.scrollY);
    var y = window.scrollY;
    if (y >= 100) {
      tiedye_cta.classList.add("show");
      tiedye_cta.classList.remove("hide");
    } else {
      tiedye_cta.classList.add("hide");
      tiedye_cta.classList.remove("show");
    }
  };
  window.addEventListener("scroll", scrollFunc);
}