JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<p>Scroll down this page</p>

<p id="myP" class="test">When you have scrolled 50 pixels from the top of this page, add the class "test" (yellow background color) to this paragraph. Scroll up again to remove the class.
</p>

<div class="bg">

</div>
<!--div id="demo" class="demo">hgjhgjgh</div-->
<div id="scrollinfo" class="demo"></div>
<button onclick="myFunction()">Click me</button>

CSS

body {
   min-height: 1800px;
}

.test {
  top:200px;
  position:fixed
}

.test2 {
font-weight: bold;
}
.test3 {
font-size: 25px;
transition: 0.8s;
}
.test4 {
transition: 0.8s;
margin-top:200px;
}

@keyframes hide{
  0% { transform: translateY(0vw);}
  20% { transform: translateY(-5px);}
  100% { transform: translateY(-80vw);}
}

@keyframes show {
  0% { transform: translateY(-80vw);}
  80% { transform: translateY(-5px);}
  100% { transform: translateY(0vw);}
}

.hide {
  animation: hide 1s forwards ease-in-out;
  
}

.show {
  animation: show 1.5s forwards ease-in-out;
}

.bg {
  position:fixed;
  top:0;
  margin-left: 90%;
  margin-right: 0;
  left: 0;
  right: 0;
  z-index:1;
  background-color: rgba(255, 20, 20, 0.3);
  height: 250px;
  width:100px;
  }
 
button {
  position: fixed;
  top: 20px;
  left: 20px;
}

.demo {
  position: fixed;
  top: 20px;
  left: 160px;
  width: 100px;
  height: 30px;
  background-color: #000;
  color: #fff;
  padding: 5px;
}

JavaScript

window.onscroll = function() {
            scrollFunction()
        };

function scrollFunction() {
	var zwei = document.documentElement.scrollTop;
  
  document.getElementById("demo").innerHTML = zwei;
  
  
  
  if (document.documentElement.scrollTop < 250) {
    document.getElementById("myP").classList.add("show", "test");}
}

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

function myFunction() {
	
  //var eins = document.body.scrollTop;
  var zwei = document.documentElement.scrollTop;
  
  //alert("body.scrollTop ist = " + eins + " documentElement.scrollTop ist = " + zwei);
  alert("documentElement.scrollTop ist = " + zwei);
  
}

var zwei = document.documentElement.scrollTop;



var position = $(window).scrollTop(); 

// should start at 0

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position && document.documentElement.scrollTop > 250) {
        
  	 document.getElementById("myP").classList.add("hide");
  	 $('#scrollinfo').text('Scrolling Down Scripts');
     
    } else if (scroll < position && document.documentElement.scrollTop < 250) {
         
    document.getElementById("myP").classList.add("show", "test");
         $('#scrollinfo').text('Scrolling Up Scripts');
    }
    position = scroll;
});