JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<p>
asdsad
</p>

<p>
asdsad
</p>

<p>
asdsad
</p>

<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>
<p>
asdsad
</p>

CSS

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

JavaScript

var tiedye_cta = document.getElementById("tiedye_cta");

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