JSFiddle - React, Tailwind, and code Playground

by jupiterjackrabbit

HTML

<div id="block-one" class="block"></div>
<div id="block-two" class="block"></div>
<div id="block-three" class="block"></div>
<div id="block-four" class="block"></div>
<div id="block-five" class="block"></div>

<ul class="nav-wrap">
    <li class="nav-item" data-hook="one"></li>
    <li class="nav-item" data-hook="two"></li>
    <li class="nav-item" data-hook="three"></li>
    <li class="nav-item" data-hook="four"></li>
    <li class="nav-item" data-hook="five"></li>
</ul>


<section id="1" style="top:0;z-index:-1;height:300px;">

<h3 id="output">
	Scrolled:
</h3> 

<!-- <p id="dimensions"></p>-->

<img id="buildingimg" 
data-start="display:none;" 
data-745="display:block;opacity:.4;"  
data-1475="display:none;" alt="" src="https://www.northbranch-md.com/wp-content/uploads/2018/07/uilding-pic_d800.jpg"> 

<div class="helper" data-start="opacity:0;" data-5="opacity:1;">
    <div class="marker darkTeal"></div>
    <div class="marker lightGreen"></div>
    <div class="marker blue"></div>
    <div class="marker gold"></div>
    <div class="marker lightTeal"></div>
    <div class="marker verylightGreen"></div>
    <div class="marker mediumTeal"></div>
</div>

 <div class="side-nav" data-start="opacity:0;" data-5="opacity:1;">
    <ul id="side-nav">
      <li class="darkTealbcg"><a href="#1">Home</a></li>
      <li class="bluebcg"><a  href="#2">About Us</a></li>
      <li class="goldbcg"><a href="#slide-3">Reviews</a></li>
      <li class="lightTealbcg"><a href="#slide-4">Our Team</a></li>
      <li class="verylightGreenbcg"><a href="#slide-5">Slide 5</a></li>
      <li class="mediumTealbcg"><a href="#slide-6">Slide 6</a></li>
    </ul>
  </div>


  
<div class="navvy">
<div class="container">
    <a href="" id="brand">
<img id="logopic" src="https://www.northbranch-md.com/wp-content/uploads/2018/04/small-logo-pic-1.png" 
data-start="transform: scale(1) rotate(0deg);left:16vw;top:40vh;width:20vw;position:absolute;"  
data-4="transform: scale(0.5)...

CSS

.block {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: pink;
}
.block:nth-child(even) {
    background-color: orange;
}
.nav-wrap {
    position: fixed;
    width: auto;
    height: auto;
    right: 30px;
}
.nav-item {
    list-style: none;
    width: 20px;
    height: 20px;
    background-color: red;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.nav-item:hover, .nav-item.selected {
    background-color: blue;
}

JavaScript

$(document).ready(function () {

    Resize();
});

//Every resize of window
$(window).resize(function () {
    Resize();
});

//Dynamically assign height
function Resize() {
    // Handler for .ready() called.
    var divwid = $(window).height() / 2,
        navhei = $('.nav-wrap').height() / 2,
        newhei = divwid - navhei;
    $('.nav-wrap').css({
        'top': newhei
    });

}

function hoverCurrentItem() {
    var h = $(".block:first").height();
    var sIndex = Math.floor($(window).scrollTop() / h);
    var $sItem = $(".nav-item").eq(sIndex);
    if (!$sItem.hasClass("selected")) {
        $(".selected").removeClass("selected");
        $sItem.addClass("selected");
    }    
}
hoverCurrentItem();

$(window).scroll(function(e) {
    hoverCurrentItem()
});

$('.nav-item').click(function () {
    $('html, body').animate({
        scrollTop: $('#block-' + $(this).attr('data-hook')).offset().top - 0
    }, "slow");
});