JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id="stickyhead">
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

#stickyhead {
  height: 100px; 
  width: 100px;
  background: blue;
  position: fixed;
  margin: 0;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -mz-transition: 0.3s;
  -o-transition: 0.3s;
}

.test#stickyhead {
  background: red !important;
}

JavaScript

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("stickyhead").style.top = "0";
  } else {
    document.getElementById("stickyhead").style.top = "-120px";
  }
  prevScrollpos = currentScrollPos;
};

    var winH = $win.height();   // Get the window height.



$(window).scroll(function() {    
var scroll = $(window).scrollTop();
 //console.log(scroll);
if (scroll >= winH) {
    //console.log('a');
    $("#stickyhead").addClass("test");
} else {
    //console.log('a');
    $("#stickyhead").removeClass("change");
}