JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">Menu</div>
<div id="header">A nice header slideshow</div>
<div id="content">My content</div>

CSS

#menu{
    background: #000;
    color: #fff;
	left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
    height: 70px;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    opacity: 1;
}

#content{
    position: relative;
    background: #364582;
    width: 100%;
    min-height: 2000px;
    display: block;
    margin: 0 auto;
    z-index: 90;
    margin: 500px auto 0 auto;
    padding: 15px;
    color: #fff;
}

#header{
    background: #f5f5f5;
	left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
    height: 350px;
    overflow: hidden;
    padding: 150px 0 0 0;
    background-color: green;
    text-align: center;
}

JavaScript

$(document).ready(function() {
var top = $("#menu");
    $(window).on('scroll', function(){
        if(($('#content').offset().top - $(window).scrollTop()) <= 100){
            top.css({'opacity': 0.4});
        }else{
            top.css({'opacity': 1});
        }
    });
});