JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<header></header>
<nav></nav>

SCSS

body {
  height: 4000px;
}

header {
  height: 200px;
  width: 100%;
  background: red;
}

nav {
  width: 100%;
  height: 20px;
  background: blue;
}

JavaScript

var menu = document.getElementById('header-menu')
var header = document.getElementById('header')

// function add class
Element.prototype.addClass = function(className) {
  this.classList.add(className);
}

// function remove class
Element.prototype.removeClass = function(className) {
  this.classList.remove(className);
}

// add & remove class on scroll
window.addEventListener('scroll', function() {

  var bodyOffset = window.pageYOffset
  var headerHeight = header.offsetHeight

  if (bodyOffset > headerHeight) {
    menu.addClass('fade-in')
  } else {
    menu.removeClass('fade-in')
  }
  
  console.log(bodyOffset);
  console.log(headerHeight);
})