JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<body>
	<div class="menu" >
	 	<div class="inner">
	 		<a href="#sTop" class="subNavBtn">Home</a>
	 		<a href="#s1" class="subNavBtn">Over mij</a> 
			<a href="#s2" class="subNavBtn">Kennis</a>
			<a href="#s3" class="subNavBtn">Projecten</a>
			<a href="#s4" class="subNavBtn">Contact</a>
		</div>
	</div>

	<div class="section s1">
		<div class="inner">
			<h1>Section 1</h1>
		</div>
	</div>

	<div class="section s2">
		<div class="inner">
			<h1>Section 2</h1>
		</div>
	</div>
	<div class="section s3">
		<div class="inner">
			<h1>Section 3</h1>
		</div>
	</div>

	<div class="section s4">
		<div class="inner">
			<h1>Section 4</h1>
		</div>
	</div>
</body>

CSS

body { margin:200px 0 2000px; }

.s1, .s3 { height:100px; background:blue;margin-bottom:300px; }

.s2, .s4 { height:100px; background:grey;margin-bottom:300px; }

.menu {
	height:50px;
	background:blue;
	width:100%;
	top:40%;
	position:fixed;
}
.menu a {
     color:black;   
}
}

.blue {background:blue;}

.white {background:white;}

JavaScript

$(window).scroll(function(e) {
    var s1 = $('.s1'),
        s2 = $('.s2'),
        s3 = $('.s3'),
        s4 = $('.s4'),
		menu = $('.menu'),
        diff = s1[0].offsetTop - window.pageYOffset;
        diff2 = s2[0].offsetTop - window.pageYOffset; 
		diff3 = s3[0].offsetTop - window.pageYOffset; 
        diff4 = s4[0].offsetTop - window.pageYOffset; 
    
		if(diff < 60) {
			$(".menu").addClass("white");
			$(".menu").removeClass("blue");
		}
		if(diff2 < 60) {
			$(".menu").addClass("blue");
			$(".menu").removeClass("white");
		}
		if(diff3 < 60) {
			$(".menu").addClass("white");
			$(".menu").removeClass("blue");
		}
		if(diff4 < 60) {
			$(".menu").addClass("blue");
			$(".menu").removeClass("white");
		}
		if(diff > 60) {
			$(".menu").removeClass("white");
			$(".menu").removeClass("blue");
		}
});