How To Keep an Active Menu on One Page When Redirect to The Section

In this topic,

We are going to see how to keep an active menu on one page when redirect to the section with a sticky header.

1. Create the HTML page.

<header>
<nav class="">
<div id="brand">
<div id="logo"></div>
</div>
<div id="menu">
<ul>
<li><a href="#hero-section">Home</a></li>
<li><a href="#aboutus">About US</a></li>
<li><a href="#gallary">Gallary</a></li>
<li><a href="#reservation">Reservation</a></li>
</ul>
</div>
</nav>
<div id="hero-section">
<h1>Home</h1>
</div>
</header>
<section id="aboutus">
<h1>About US</h1>
</section>
<section id="gallary">
<h1>Gallary</h1>
</section>
<section id="reservation">
<h1>Reservation</h1>
</section>

Step: 2 Add CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
li a {
    color: #fff;
    background: #000;
}
.active {
   width: 100px;
   height: 20px;
   background: #fff;
   color: red;
   display: block;
   border-radius: 90px;
   text-align: center;
}
body {
   overflow-x: hidden;
   overflow-y: scroll;
}
header {
   width: 100%;
   height: 100%;
   background: #878eef;
   display: flex;
}
nav {
   width: 100%;
   height: 160px;
   background: #000000;
   display: block;
   position: absolute;
   transition: all 0.3s;
}
nav.stickyheader {
   position: fixed;
   box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
   height: 100px;
}
#brand, #menu, ul {
   display: flex;
   align-items: center;
   list-style-type: none;
}
#brand {
   padding-left: 40px;
}
#logo {
    width: 55px;
    height: 55px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}
#menu {
    justify-content: flex-end;
    padding-right: 40px;
}
li {
    margin-left: 20px;
}
#hero-section, #aboutus, #reservation, #gallary  {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
section {
    width: 100%;
    height:100%; 
    display: flex;
    justify-content: center;
}
#aboutus{
     background: #fa6c98;
}
#reservation{
     background: #70d09f6b;
}
#gallary {
     background: #ca1bd640;
}
#heading {
     width: 120px;
     height: 20px;
     background: #fff;
     border-radius: 90px;
     margin-top: 40px;
}

step:3 Add jQuery

$(document).ready(function () {
   $(window).scroll(function() {
  var windowTop = $(window).scrollTop();
  if( windowTop >= 100 ){
    $( "nav" ).addClass( "stickyheader" );
  }else{
    $( "nav" ).removeClass( "stickyheader" );
  }
  if(windowTop > 100){ 
    $('ul').css('top', '100px')
  }else{
    $('ul').css('top', '160px');
  }
   });
   $('#menu a[href*="#"]').on('click', function (e) {
  $('html,body').animate({
       scrollTop: $($(this).attr('href')).offset().top - 100 },
       500);
      e.preventDefault();
   });
   $('#menu ul li a').click(function(){
  $('#menu li a').removeClass("active");
  $(this).addClass("active");
   });
});

For OutPut Please Review The Video:

I hope you guys found something useful ????