JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div class="content">
    <div class="headerbar">
    </div>
</div>
<div class="block">
    <h2>Fade this in / out as scroll down</h2>
</div>

CSS

.block {
    background: #339994;
    width:100%;
    padding-top:140px;
    height: 200px;
    position: fixed;
}
h2 {
    color: #fff;
    margin: 0px;
    text-align: center;
}
.headerbar {
    background: #f5dc61;
    width:100%;
    height: 680px;
}
.content {
    position: relative;
    top: 300px;
}
body {
    margin: 0;
    font-family: arial;
}

JavaScript

$(window).scroll(function() {
    var el = $('.block');    
    var offset = el.offset();  
    var opacity = ( (offset.top - el.height() ) / 100 ) * -1;
    $('.block').css('opacity', opacity );
});