JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="menu">
  <p>
    menu goes here
  </p>
  <p class="scrolled"><span>I scrolled: </span><span class="value"></span> <span>px</span></p>

</div>

CSS

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #212121;
  min-height: 300vh;
}

.menu {
  padding: 30px;
  background: rgba(34, 65, 255, 1);
  color: #fff;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

JavaScript

var scrollPosition = $(document).scrollTop();
var menuBg = $('.menu').css('background-color');
var rgb = menuBg.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');



setMenuOpacity();
$(window).on('scroll', function() {
  setMenuOpacity();
});
function setMenuOpacity() {
  var scrollPosition = $(document).scrollTop();
  var opacity = scrollPosition / 1000;
  $('.menu').css('background-color', 'rgba(' + rgb[0]  + ', ' + rgb[1] + ', '+ rgb[2] +', ' + opacity + ')');
}