JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div class="banner">
    <img src="http://lorempixel.com/920/700/" alt="">
</div>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>

CSS

html, body {
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}
div img {
    display: block;
    width: 100%;
}
div.banner {
    width: 100%;
    position: relative;
}
div.social, div.title {
    position: fixed;
    z-index: 10;
}
div.social {
    right: 40px;
    bottom: 40px;
    background: #e4f;
}
div.title {
    left: 40px;
    bottom: 40px;
    background: #e4f;
}

JavaScript

$(window).scroll(function () {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        var divs = $('.banner');
        if ($(window).scrollTop() <= 200) {
            divs.fadeIn(5000);
        } else {
            divs.fadeOut(5000);
        }
    }, 1000)); //timeout set to 1 second
});