JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div class='wrapper'>
    <div class='slide1 slide'>
        <h2>Slide 1 Title</h2>
        <p>And here we go with the subtitle</p>
    </div>
    <div class='slide2 slide'>
        <h2>Slide 2 Title</h2>
        <p>But this subtitle's gotta be a little different.</p>
    </div>
</div>
<div class='indicator'>
    
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
}
html, body, .wrapper, .slide {
    height: 100%;
}
.wrapper {
    color: #fff;
}
.slide {
    /*height: 400px;*/
    background: #a00;
    border-bottom: 4px solid #fff;
    text-align: center;
    padding: 5px;
    
}
.slide2 {
    background: #00c;
}

.indicator {
    position: fixed;
    top: 0;
    left: 0;
    color: #fff;
}

JavaScript

function updateHeights() {
    var off = $(window).scrollTop();
    $('.indicator').text(off);
}

function delay(fn, arg) {
    window.setTimeout(function() {
        fn(arg)
}

$(window).on('scroll', delay(updateHeights, ));

updateHeights();