Navigation bar color changes to match the section

I'm trying to design my webpage so that the navigation bar color changes to match the section that the user is reading. For example when the user is on a red section, the nav bar should be red etc. Nota: I'm using bulma as a css library.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet"/>
<html class="has-navbar-fixed-top">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
  <div class="navbar-brand is-transparent">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu is-transparent">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary is-fullheight">
  <div class="hero-body">
    <div class="container">
      <p class="title">
        Green Fullheight  hero with navbar
      </p>
    </div>
  </div>
</section>
  
<section class="hero is-link is-fullheight">
  <div class="hero-body">
    <div class="container">
      <p class="title">
       Blue Fullheight hero with navbar
      </p>
    </div>
  </div>
</section>
</html>

Edit :

The navigation bar should be changed when the user is scrolling down or top. A similar behavior is used by dropbox for their homepage : https://www.dropbox.com/

My solution : Consists of making the navigation bar transparent :

.navbar {
background-color: transparent;
background-image: none;
}

Solution

Actually my question is clear but many people just down voted without even telling why. Hopefully I figured out the answer myself. The solution is to make the navigation bar background transparent with css only. No JavaScript needed :

.navbar {
background-color: transparent;
background-image: none;
}