title: Modify existing jQuery to change URL on Scroll
body: <p>I have a jQuery code obtained from w3schools.com which ON CLICK (clicking an <code>&lt;a href="#id"&gt;&lt;/a&gt;</code>) changes URL's #id and also allows smooth scrolling to a particular DIV section. But its not working on scroll. I want the same with an scrolling effect. When I scroll down or up to a particular section the URL's #id should change.</p>
  
  <p>Current jQuery Code: </p>
  
  <pre><code>$(document).ready(function(){
    $("#navlist a").on('click', function(event) {
      if(this.hash !== ""){
        var hash = this.hash;
          $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function(){
          window.location.hash = hash;                
        });
      }
    });
  });
  </code></pre>
  
  <p>I searched on stackoverflow and I got something like this:</p>
  
  <pre><code>$(document).bind('scroll',function(e){
      $('div').each(function(){
          if ($(this).offset().top &lt; window.pageYOffset + 10 &amp;&amp; $(this).offset().top + $(this).height() &gt; window.pageYOffset + 10){
              window.location.hash = $(this).attr('id');
          }
      });
  });
  </code></pre>
  
  <p>This seems to work but when I place both the code either one of them is stopping the other one from executing. I thought of combining both the codes into one to achieve both onclick and scroll effect but I am not being able to do so (weak hands on jquery yet).</p>
  
  <p>Example URL with ID: <code>http://localhost/sites/fh/index.php#first</code></p>
  
  <p>Please help me devs.</p>