JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h1>Parallax Scrolling menu highlight item</h1>
<section id="page-content">
	<section id="main-area" class="wide-box-holder screen-area main-area" style="min-height: 444px;">
    	<div class="section-bg">
        <video id="bgvid" poster="images/main-section.jpg" loop="" autoplay="">
            <source type="video/webm" src="images/video_bg.webm0"></source>
            <source type="video/mp4" src="images/video_bg.mp4"></source>
		</video>
        </div>
         
         <div class="container">
                  <a href="#" class="navbar-brand"><img alt="" src="images/logo.jpg"></a>
			<div class="main-caps col-sm-4">
            <h2>COGNITION FILMS</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown printer took 
a galley of typeand scrambled it to make a </p>
			<div class="hed-tail"><h3>Lorem Ipsum</h3></div>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s,</p>

			<div class="lnk-btn more-btn"><a href="#">Read More</a></div>

            </div>
         </div>
    </section>




	<section id="about-area" class="wide-box-holder screen-area about-area white-area clrlist listview" style="min-height: 444px;">
    	<div class="section-bg"><img alt="" src="images/txt-bg.jpg"><div class="whitepati"></div></div>
         
         <div class="container">
			<div class="about-cont col-sm-offset-5 col-sm-7">
            <h2>Lorem Ipsum is simply dummy</h2>
            <div class="about-inr col-sm-6 pad0">
            	<ul>
                	<li>FINANCIAL PLANNING</li>
                    <li>INVESTMENT CONSULTING</li>
                    <li>INVESTOR BEHAVIOR MANAGEMENT</li>
                    <li>RELATIONSHIP MANAGEMENT</li>
 				</ul>
            </div>
            
            <div class="about-cont...

CSS

.flot-nav {
    list-style-type: none;
    padding: 0;
    position: fixed;
    right: 30px;
    top: 30%;
    z-index: 501;
}
.flot-nav .active {
    background-color: #ff0;
}

JavaScript

$(document).ready(function() {
  var window_height = $(window).height();
  $(window).scroll(function() {
    var scrollMiddle = $(window).scrollTop() + (window_height/2);
    $('section.wide-box-holder').each(function() {
      elTop = $(this).offset().top;
      elBtm = elTop + $(this).height();
      if (elTop < scrollMiddle && elBtm > scrollMiddle) {
        $(this).addClass("activediv");
		  $(".white-area.activediv .section-bg .whitepati" ).animate({ "left": "100%" }, 3000);
		  $(".white-area.activediv .section-bg .whitepati" ).animate({ "width": "100%" }, 3000);
	  if(jQuery(".white-area").hasClass('activediv')) { jQuery('.hdr1').addClass('gmknav'); } else{ jQuery('.hdr1').removeClass('gmknav'); }
	  if(jQuery(".white-area").hasClass('activediv')) { jQuery('.flot-nav').addClass('gmknav'); } else{ jQuery('.flot-nav').removeClass('gmknav'); }

	//Finding Active Section
	  meriID = $(this).attr('id');
//	  alert (meriID);

var obj = ['main','about','team','production','contact','cr'];
$.each( obj, function( key, value ) {
	if($("."+value+"-area").hasClass('activediv')){ $(".flot-nav ."+value+"-area").addClass("active"); }else{ $(".flot-nav ."+value+"-area").removeClass("active"); }
//	alert( key + value );
});

	      } else {
        $(this).removeClass("activediv");
      }
	  
    });
  });
});