title: Change url on window scroll
body: <p>I want to get an url change while I'm scroll the window, instead changing the menu class</p>
  
  <p>I got reference from here </p>
  
  <p><a href="https://codepen.io/anon/pen/LdLgNo" rel="nofollow noreferrer">https://codepen.io/anon/pen/LdLgNo</a></p>
  
  <p>and i modify a bit just add some push state, but the problem is i have a fixed header so i want to change it when it hit this height which is 75px in this case, i add extra 75px for the scroll as well,  but it still didn't work properly, actually how to make it precise when the div scrolled and the top of each div meet the bottom of the header, so the url and the active class is changing</p>
  
  <p>HTML :</p>
  
  <pre><code>   &lt;div class="m1 menu"&gt;
          &lt;div id="menu-center"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="home"&gt;&lt;/div&gt;
      &lt;div id="portfolio"&gt;&lt;/div&gt;
      &lt;div id="about"&gt;&lt;/div&gt;
      &lt;div id="contact"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
  }
  .menu {
      width: 100%;
      height: 75px;
      background-color: rgba(0, 0, 0, 1);
      position: fixed;
      background-color:rgba(4, 180, 49, 0.6);
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  .light-menu {
      width: 100%;
      height: 75px;
      background-color: rgba(255, 255, 255, 1);
      position: fixed;
      background-color:rgba(4, 180, 49, 0.6);
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  #menu-center {
      width: 980px;
      height: 75px;
      margin: 0 auto;
  }
  #menu-center ul {
      margin: 15px 0 0 0;
  }
  #menu-center ul li {
      list-style: none;
      margin: 0 30px 0 0;
      display: inline;
  }
  .active {
      font-family:'Droid Sans', serif;
      font-size: 14px;
      color: #fff;
      text-decoration: none;
      line-height: 50px;
  }
  a {
      font-family:'Droid Sans', serif;
      font-size: 14px;
      color: black;
      text-decoration: none;
      line-height: 50px;
  }
  #home {
      background-color: grey;
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-image: url(images/home-bg2.png);
  }
  #portfolio {
      background-image: url(images/portfolio-bg.png);
      height: 100%;
      width: 100%;
  }
  #about {
      background-color: blue;
      height: 100%;
      width: 100%;
  }
  #contact {
      background-color: red;
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>JS :</p>
  
  <pre><code>$(document).ready(function () {
      $(document).on("scroll", onScroll);
  
      //smoothscroll
      $('a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");
  
          $('a').each(function () {
              $(this).removeClass('active');
          })
          $(this).addClass('active');
  
          var target = this.hash,
              menu = target;
          $target = $(target);
          $('html, body').stop().animate({
              'scrollTop': $target.offset().top-75
          }, 500, 'swing', function () {
              window.location.hash = target;
              $(document).on("scroll", onScroll);
          });
      });
  
  
  function onScroll(event){
      var scrollPos = $(document).scrollTop();
      $('#menu-center a').each(function () {
          var currLink = $(this);
          var refElement = $(currLink.attr("href"));
          if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
              $('#menu-center ul li a').removeClass("active");
              currLink.addClass("active");
          }
          else{
              currLink.removeClass("active");
          }
      });
  }
  </code></pre>
  
  <p>Codepen : <a href="https://codepen.io/anon/pen/LdLgNo" rel="nofollow noreferrer">https://codepen.io/anon/pen/LdLgNo</a></p>