title: How to get the effect on navigation button
body: <p>I am writing this code to change my navigation link colour(white to #03c1cb) based on the url address not but it doesn't run properly please help me. I want to change the color of navigation link at that particular url address
   my html code is</p>
  
  <pre><code>&lt;a href="#home" id="start1" class="scroll" style="text-decoration:none;position:absolute;
         right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;
         transition:0.5s"  onmouseover="big(this)" onmouseout="small(this)"&gt;HOME&lt;/a&gt;
  
  
  function big(x) {
  
      x.style.fontSize = "17px";
      x.style.color = "#03c1cb";
  }
  
  function small(x) {
      var y = location.hash;
      if (x.href == y) {
          x.style.fontSize = "17px";
          x.style.color = "#03c1cb";
      } else {
          x.style.color = "white";
          x.style.fontSize = "15px";
      }
  }
  
  function isElementInViewport(el) {
      //special bonus for those using jQuery
      if (typeof jQuery === "function" &amp;&amp; el instanceof jQuery) {
          el = el[0];
      }
      var rect = el.getBoundingClientRect();
      return (
          rect.top &gt;= 0 &amp;&amp;
          rect.left &gt;= 0 &amp;&amp;
          rect.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp; /*or $j(window).height() */
          rect.right &lt;= (window.innerWidth || document.documentElement.clientWidth) /*or $j(window).width() */
      );
  }
  
  // url change on clicking
  $(document).ready(function() {
      $(".scroll").click(function(e) {
          e.preventDefault();
          var section = this.href,
              sectionClean = section.substring(section.indexOf("#"));
  
          $("html, body").animate({
              scrollTop: $j(sectionClean).offset().top
          }, 1000, function() {
              window.location.hash = sectionClean;
          });
  
      });
  });
  // listen for the scroll event
  $(document).on("scroll", function() {
      console.log("onscroll event fired...");
      // check if the anchor elements are visible
      $(".anchor").each(function(idx, el) {
          if (isElementInViewport(el)) {
              // update the URL hash
              if (window.history.pushState) {
                  var urlHash = "#" + $j(el).attr("id");
                  window.history.pushState(null, null, urlHash);
              }
          }
      });
  });
  </code></pre>
  
  <p>Please help me </p>