JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

JavaScript

// get document dependencies
var menu = document.getElementById('website-navigator'),
  win = window,
  doc = document,
  elem = doc.documentElement,
  body = doc.getElementsByTagName('body')[0],
  winW = win.innerWidth || elem.clientWidth || bod.clientWidth,
  winH = win.innerHeight || elem.clientHeight || bod.clientHeight,
  cst, currentScrollTop = 0; // these 2 are used to autohide menu on scrolling

body.addEventListener('scroll', menuFunctions);

var menuBg = getStyle(menu, 'backgroundColor'),
  // create an array containing only the values from background's rgba
  rgb = menuBg.replace(/^(rgb|rgba)\(/, '').replace(/\)$/, '').replace(/\s/g, '').split(',');

// only set the transparent menu if on specific pages and the page is not scrolled
if (body.classList.contains('transparent-menu') && window.scrollY < 80) {
  menu.style.backgroundColor = 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', 0)';
} else {
  menu.style.backgroundColor = 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', 1)';
}

function menuFunctions() {
  // get the amount of scrolled pixels
  var windowScrollTop = window.scrollY;
  console.log(windowScrollTop);
  // set the amount of pixels to scroll before the nav hides
  var hideOffset = winH;
  currentScrollTop = windowScrollTop;

  // set the opacity of menu based on the amount of scrolled pixels
  if (body.classList.contains('transparent-menu')) {
    if (windowScrollTop > 80) {
      var opacity = windowScrollTop / 100;
      menu.style.backgroundColor = 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', ' + opacity + ')';
    } else {
      menu.style.backgroundColor = 'rgb(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', 0)';
    }
  }

  if (cst < currentScrollTop && windowScrollTop > hideOffset) {
    menu.classList.add("scrollUp");
  } else if (cst > currentScrollTop && !(windowScrollTop <= hideOffset)) {
    menu.classList.remove("scrollUp");
  }
  cst = currentScrollTop;
}

function getStyle(el, styleProp) {
  if...