JSFiddle - React, Tailwind, and code Playground

by littleguga

HTML

<div id="container"></div>

CSS

* {
	margin:0;
	padding:0;
	}

body {
	height:1000px;
	}

	#container {
        margin-top:300px;
		width:100%;
		height:50px;
		background-color:black;
		opacity:1;
		}

JavaScript

$(window).on('scroll', function() {
	var scrollCoef = 0.0035;

	$('#container').css({
		opacity: 1 - $(window).scrollTop() * scrollCoef
	})
});