I want to make the nav menu as we scroll the page to highlight?

Question

Here is the example what i want.

https://insights.stackoverflow.com/survey/2018?utm_source=hackernewsletter&utm_medium=email&utm_term=code

• You can see here when you scroll the left menu highlights.
• Also when there is sub-menu of menu , sub-menu will get extend when the menu get highlight . and the other menu get collapse

I want it by pure javascript , no third party library .

Any idea how to do this.

Answer 1

You probably should look into scrollTop.

Answer 2

One page navigation highlight from Codepen.

$(document).ready(function(){

   $("div").mouseenter(function(){
     var id = $(this).attr('id');
     $('a').removeClass('active');
     $("[href=#"+id+"]").addClass('active');
   });

});

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
 font-family: Geneva, Tahoma, Verdana, sans-serif;
 margin: 0px;
}

.nav{
 width: 100%;
 height: 50px;
    background: rgba(200,200,200,0.2);
    position: fixed;
    top: 0px;
}

#menu{
 float: right;
    font-size: 40px;
    font-weight: normal;
    padding-right: 20px;
    color: rgba(100,100,100,0.9);;
}

.nav ul{
 width: 150px;
 list-style-type: none;
 background: rgba(200,200,200,0.2);
    border-radius: 5px;
}

#top-menu{
   clear: both;
   display: block;
   float: right;
   padding-left: 0px;
   margin-top: 10px;
   margin-right: 20px;

}
.links{
 color: black;
 font-size: 20px;
 font-weight: normal;
}

.nav ul li a{
 text-decoration: none;
 text-align: center;
 display: block;
 padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
 color: #fff;
 background-color: black;
 border-left: thick solid red;
}

#wrapper{
 margin-top: 50px;
}

.container{
 width: 800px;
 height: 600px;
 margin: 0px auto;
    background: rgba(200,200,200,0.2);
    border-bottom: 1px solid rgba(200,200,200,1);
    padding: 20px;
}

.active{
 color: white;
 background-color: rgba(100,100,100,1);
 border-left: thick solid rgba(0,255,0,0.5);
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
  <span id ="menu">&#9776;</span> 
  <ul id="top-menu">
   <li><a href="#one" class="links">Menu 1</a></li>
   <li><a href="#two" class="links">Menu 2</a></li>
   <li><a href="#three" class="links">Menu 3</a></li>
   <li><a href="#four" class="links">Menu 4</a></li>
   <li><a href="#five" class="links">Menu 5</a></li>
   <li><a href="#six" class="links">Menu 6</a></li>
  </ul>
 </div>
 <div id="wrapper">
  <div id="one" class="container">
   one
  </div>
  <div id="two" class="container">
   two
  </div>
  <div id="three" class="container">
   three
  </div>
  <div id="four" class="container">
   four
  </div>
  <div id="five" class="container">
   five
  </div>
  <div id="six" class="container">
   six
  </div>
 </div>