JSFiddle - React, Tailwind, and code Playground

by ahkeno

HTML

<section class="block" id="block-1" data-program="block-1">Block 1</section>
<section class="block" id="block-2" data-program="block-2">Block 2</section>
<section class="block" id="block-3" data-program="block-3">Block 3</section>
<section class="block" id="block-4" data-program="block-4">Block 4</section>

CSS

.block {
    border: 1px solid #666;
    box-shadow: 2px 2px 2px #333;
    background: #f1f1f1;
    height: 979px;
    padding: 100px;
    font-size: 20px;
    color: #333;
    max-height: 100%;
    text-align: center;
}
.block:nth-child(1) {
    background-color: red;
}
.block:nth-child(2) {
    background-color: green;
}
.block:nth-child(3) {
    background-color: blue;
}
.block:nth-child(4) {
    background-color: yellow;
}

JavaScript

(function () {
    //Find all  top,bottom and Hash of each sections
    var section = $.map($("section"), function (e) {
        var $e = $(e);
        var pos = $e.position();
        return {
            top: pos.top - 100,
            bottom: pos.top - 100 + $e.height(),
            hash: $e.attr('id')
        };
    });
     //Checking scroll 
    var top = null;
    var changed = false;
    var currentHash = null;

    $(window).scroll(function () {
        var newTop = $(document).scrollTop();
       
        changed = newTop != top;
        if (changed) {
            top = newTop;
        }

    });
    //set up for Hash while start scroll and the checking only every 300ms to prevent FPS
    function step() {
        if (!changed) {
            return setTimeout(step, 200);
            console.log("End");
        }
        var count = section.length;
        var p;

        while (p = section[--count]) {
            if (p.top >= top || p.bottom <= top) {
                continue;
            }
            if (currentHash == p.hash) {
                break;
            }
            var scrollTop = $(document).scrollTop();
            window.location.hash = currentHash = p.hash;
            // prevent browser to scroll
            $(document).scrollTop(scrollTop);
        }
        setTimeout(step, 200);
    }
    setTimeout(step, 200);
})();