How to highlight active menu items on the landing page?

Question

css

Good afternoon!
There is a menu:

<div class="nav">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="#service">Service</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#team">Team</a></li>
    <li><a href="#tarifs">Tarifs</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

There are styles for it:

.nav{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: #fff url("../images/logo.png") no-repeat 8.313em 1.938em;
  line-height: 6.25em;
}
.nav ul{
  margin-left: 51%;
}
.nav ul li{
  display: inline-block;
  margin-right: 0.625em;
}
.nav ul li a{
  display: block;
  text-decoration: none;
  color: #484c55;
  padding: 0 1.25em;
}
.nav ul li a:hover,
.nav ul li a:focus,
.nav ul li a.active{
  background: #f8f9fb;
  color: #90dbdd;
  borde

How can I make the active class move from item to item when scrolling the page and following links?
I am not familiar with JS yet. I found this solution on the Internet , but it does not work for me.

Answer 1

In! I suffered from the phone, but I did it, because it was interesting myself :)

Answer 2

well, develop this solution) is jquery connected to the page?

Answer 3

How to set a class for certain pages?