JSFiddle - React, Tailwind, and code Playground

HTML

<div id="1">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<div id="2">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
<div id="3">333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
<div id="4">444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
<div id="5">555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>
<div id="6">666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</div>
<div id="7">777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777</div>
<div id="8">888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</div>
<nav>
    <ul>
        <li><a id="1-button" href="#1">1</a></li>
        <li><a id="2-button" href="#2">2</a></li>
        <li><a id="3-button" href="#3">3</a></li>
        <li><a id="4-button" href="#4">4</a></li>
        <li><a id="5-button" href="#5">5</a></li>
        <li><a id="6-button" href="#6">6</a></li>
        <li><a id="7-button" href="#7">7</a></li>
        <li><a id="8-button" href="#8">8</a></li>
    </ul>
</nav>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
div {
    border: 4px solid;
    width: 100%;
    height: 200px;
}

nav {
    background: black;
    position: fixed;
    top: 20px;
    right: 0;
    color: white;
    font-size: 16px;
    padding: 8px;
}

a.visible {font-size: 32px;}

JavaScript

// Scroll to section on menu click
$("nav a").click(function(e) {
		var $this = $(this),
			section = $($this.attr("href")),
			offsetT = section.offset().top;
		
		$("html, body").stop().animate({scrollTop: offsetT}, 600);
		
		e.preventDefault();
	});

function SnapIt() {
    var currentTop = $(window).scrollTop(),
        wHeight = $("div").outerHeight(),
        posToScroll = Math.round(currentTop / wHeight) * wHeight;

    $("html, body").stop().animate({
        scrollTop: posToScroll
    }, 600, function () {
        $("body > div").each(function () {
            var $this = $(this),
                nextSection = $this.next("div"),
                offsetT = $this.offset().top;
            if (offsetT == posToScroll) {
                $("nav a").removeClass("visible");
                $("a#" + $this.attr("id") + "-button").addClass("visible");
                console.log("a#" + $this.attr("id") + "-button");
            }
        });
    });
}

$(window).scroll(function () {
    clearTimeout($.data(this, "scrollTimer"));
    $.data(this, "scrollTimer", setTimeout(function () {
        SnapIt();
    }, 800));
});