Edit header by scrolling

Change class name on click in jQuery

by Samuel Diez

HTML

<div id="navbar">
  <div id="Section1" class="section active">Section1</div>
  <div id="Section2" class="section">Section2</div>
  <div id="Section3" class="section">Section3</div>
</div>
<div id="controller"></div>

<div class="main-container">
  <div id="content-section-1" class="separator">SECTION 1</div>
  <div id="content-section-2" class="separator">SECTION 2</div>
  <div id="content-section-3" class="separator">SECTION 3</div>
</div>

CSS

#navbar{
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.section{
  text-align: center;
  width: 20%;
}

.section:hover, .active{
   border-bottom: 1px solid blue;
}

#controller{
  /*border: 1px solid blue;*/
  position: fixed;
  width: 100%;
  top: 50%;
}

.main-container{
  height: 1500px;
  margin-top: 50px;
}

.separator{
  width: 100%;
  border: 1px solid red;
  height: 500px
}

#separator1{
  margin-top: 50px;  
}

#footer{
  border: 1px solid black;
  height: 20px;
}

JavaScript

var dy = $('html').offset().top - $('#content-section-1').offset().top;
var distance_s1 = Math.sqrt(dy * dy);
  
var dy = $('html').offset().top - $('#content-section-2').offset().top;
var distance_s2 = Math.sqrt(dy * dy);
  
var dy = $('html').offset().top - $('#content-section-3').offset().top;
var distance_s3 = Math.sqrt(dy * dy);

$(window).scroll(function() {
  var dy = $('html').offset().top - $('#controller').offset().top;
  var distance_c = Math.sqrt(dy * dy); 
  
  if(distance_c >= distance_s3){
  	$('#navbar').find('.active').removeClass('active');
		$('#Section3').addClass('active');
	}else if(distance_c >= distance_s2){
    $('#navbar').find('.active').removeClass('active');
  	$('#Section2').addClass('active');
  }else if(distance_c >= distance_s1){
    $('#navbar').find('.active').removeClass('active');
  	$('#Section1').addClass('active');
  }
});