JSFiddle - React, Tailwind, and code Playground

by jupiterjackrabbit

HTML

<section id="section-one" class="section" 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 nav-item" data-hook="one"><a href="#1">Home</a></li>
      <li class="bluebcg nav-item" data-hook="two"><a  href="#2">About Us</a></li>
      <li class="goldbcg nav-item" data-hook="three"><a href="#slide-3">Reviews</a></li>
      <li class="lightTealbcg nav-item" data-hook="four"><a href="#slide-4">Our Team</a></li>
      <li class="verylightGreenbcg nav-item" data-hook="five"><a href="#slide-5">Slide 5</a></li>
      <li class="mediumTealbcg nav-item" data-hook="six"><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) rotate(0deg);position:absolute;" 
data-6="top:-3vh;width:10vw;position:fixed;" 
data-7="top:-3vh;left:1vw;width:10vw;position:fixed;">

<img id="nbname" src="http://www.northbranch-md.com/wp-content/uploads/2018/04/logo-name.png" 
data-start="transform: scale(1)...

CSS

.entry-title {
  display: none;
}

.page-id-3305,
.site,
.site-content,
.content-area,
.site-main,
.post-3305,
.entry-content {
  top: 0;
  min-width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}
#home {
top:0;
height:1px;
}
.navvy:before, .navvy.background {
  background:rgba(0, 128, 0, .2);
 transition:background 3s;
box-shadow: 0px 1px 10px #999;
}
.navvy.hidden {
  transform: translateY(-100%);
}
.navvy.show {
top:0;
transform:translate(0,0);
}
.side-nav.hidden {
  transform:translateX(100%);
}
.side-nav.show {
right:-5px;
transform:translate(0,0);
}
.heart.hidden {
opacity:0;
}
.introtext.hidden{
  opacity:0; 
}
.heart.show {
  opacity:.6; 
z-index:200;
}
.introtext.show{
  opacity:1;  
z-index:201;
}


.hide{opacity:0;}
.one-opa{opacity:1;}
.seven-opa{opacity:.7;}
.nine-opa{opacity:.99;}
.opa-speed-half{transition:opacity .5s;}
.opa-speed-one{transition:opacity 1s;}
.opa-speed-three{transition:opacity 3s;}
.opa-speed-five{transition:opacity 5s;}
.opa-speed-ten{transition:opacity 10s;}

.page-id-3305 {
  overflow-x: hidden;
  overflow-y: scroll;
}

.entry-header {
  display: none;
}

/*#dimensions {
z-index: 1001;
position:fixed;
top:10%;
}*/

.light-color {
    color: white;
}


  #buildingimg {
position:fixed;
  transform:translateY(-40px);
min-height:100vh;
min-width:100vw;
z-index:80;
  }
  
  #videobg {
    margin:0;
top:0;
left:0;
    position: fixed;
    min-width: 100vw;
    max-width: 100vw;
    height: auto;
    z-index: 80 !important;
  }

  #logopic {
    z-index: 100;
    height: auto;
  }

  #logopic.skrollable.skrollable-before {
    top: 40vh;
  }

  #logopic.skrollable.skrollable-between {
    top: 40vh;
  }

  #logopic.skrollable-after {
    margin-top: 10px;
  }

  #nbname {
    z-index: 100;
    height: auto;
  }

  #nbname.skrollable-between {
    margin-top: 2.5em;
  }

  #nbname.skrollable-after {
    margin-top: 6px;
  }

  #mb2 {
    text-align: center;
    box-sizing: border-box;
    z-index: 100;
    margin: 5px 5px;
   ...

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 = $('#side-nav').height() / 2,
        newhei = divwid - navhei;
    $('#side-nav').css({
        'top': newhei
    });

}

var blockHeight = [];
$(".section").each(function() {
    blockHeight.push($(this).height());
});

function hoverCurrentItem() {
    var sIndex = 0;
    var totalHeight = 0;
    var scrolled = $(window).scrollTop();
    for (var i in blockHeight) {
        totalHeight += blockHeight[i];
        if (totalHeight > scrolled) {
            break;
        }
        else {
            sIndex++;
        }
    }

    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: $('#section-' + $(this).attr('data-hook')).offset().top - 0
    }, "slow");
}) (jQuery);