JSFiddle - React, Tailwind, and code Playground

by jupiterjackrabbit

HTML

<div class="navvy2" role="navigation" data-start="" data-100="">
<div class="container">
    <a href="" id="brand">
<img data-start="" data-100="" id="logopic3" src="https://www.northbranch-md.com/wp-content/uploads/2018/04/small-logo-pic-1.png">

<img data-start="" data-100="" id="nbname3" src="http://www.northbranch-md.com/wp-content/uploads/2018/04/logo-name.png">
</a>
 
<form data-start="" data-100="" >
  <input id="mb2" class="" type="button" onclick="window.location.href='http://northbranchanimalhospital.vetsourcecms.com/'"  value="VISIT OUR ONLINE PHARMACY"></form>

<form data-start="" data-100="" >
  <input  id="mb1" class="" type="button" 
onclick="window.location.href='https: '" value="MAKE AN APPOINTMENT">
</form>

    <ul class="navbar-menu" data-start="opacity:0;" data-5="opacity:1;">
      <li><a href="#">something</a></li>
      <li><a href="#">something</a></li>
      <li><a href="https://www.northbranch-md.com/team/">Our Team</a></li>
      <li><a href="https://www.northbranch-md.com/services/">Services</a></li>
      <li><a href="#">page d</a></li>
    </ul>
   
  </div>
</div>


<h3 id="output">
	Scrolled:
</h3> 
<div class="helper">

    <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="slides">


    <div class="slide" id="slide-1">


      <div class="slide__bg"></div>
      <div class="slide__content">
        <div class="slide__text">
          <h1 id="slide-1-title">Services</h1>
          <p>Bacon ipsum dolor amet alcatra beef meatloaf brisket beef ribs meatballaf tenderloin leberkas pancetta hamburger cow kielbasa, filet mignon tri-tip beef ribs.</p>
        </div>
      </div>
    </div>

    <div class="slide" id="slide-2">
      <div class="slide__bg"></div>
      <div...

CSS

html, body{
top:0;
left:0;
margin:0;
padding:0;
}

 .helper {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    z-index:300;
    height:100%;
    -webkit-transition:opacity 2s ease-in-out;
    -o-transition:opacity 2s ease-in-out;
    transition:opacity 2s ease-in-out;
  }
#output {
color:black;
position:fixed; 
left:0; 
top:90%; 
padding:10px; 
font-weight:bold; 
font-size: 1em; 
opacity:1; 
z-index:3000;
}
  .marker {
    height: 16.67%;
    left: 0;
    width: 100%;
  }


  .darkTeal {
    background-color: #174049;
  }
.darkTealbcg{
background:rgba(23, 64, 74, 1);
}
.darkTealbcg:hover {
background:rgba(23, 64, 74, 1);
}

  .lightGreen {
    background-color: #8aa827;
  }
.lightGreenbcg {
background:rgba(138, 168, 39, 1);
}
.lightGreenbcg:hover {

}

  .blue {
    background-color: #85acd3;
  }
.bluebcg {
background-color:rgba(133, 172, 211, 1);
}
.bluebcg:hover{

}

  .gold {
    background-color: #fcc60e;
  }
.goldbcg{
background-color:rgba(252, 198, 14, 1);
}
.goldbcg:hover{

}

  .lightTeal {
    background-color: #9cd7c5;
  }
.lightTealbcg {
background-color:rgba(156, 215, 197, 1);
}
.lightTealbcg:hover{

}

  .verylightGreen {
    background-color: #c7dc81;
  }
.verylightGreenbcg {
background-color:rgba(199, 220, 129, 1);
}
.verylightGreenbcg:hover {
background-color:rgba(199, 220, 129, .5);
}

  .mediumTeal {
    background-color: #194b5b;
  }
.mediumTealbcg {
background-color: rgba(25, 75, 91, .3);
}
.mediumTealbcg:hover {
background-color: rgba(25, 75, 91, 1);
}
.entry-header{
display:none;
}
.navvy2.hidden {
top:-100% !important;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%) !important;
}
.navvy2.show {
top:0;
-webkit-transform:translate(0,0);
    -ms-transform:translate(0,0);
        transform:translate(0,0);
}
.navvy2 {
  background:rgba(0, 128, 0, .2);
 -webkit-transition:background 3s;
 -o-transition:background 3s;
 transition:background...

JavaScript

jQuery(document).ready(function ($) {
var prev = 0,
$window = $(window),
navvy = $('.navvy2'), 
slides = $('.slides');

$window.on('scroll', function(){
  var scrollTop = navvy.offset().top + slides.scrollTop();
  if (scrollTop >= 100){
  navvy.toggleClass('hidden', scrollTop > prev);
  }
  prev = scrollTop;
});
});