Setting url hash based on section scrolled to?

Question

I have a nav and sections as follows..

<ul id="nav">
  <li>section 1</li>
  <li>section 2</li>
</ul>

<section id="section-1">
  <p>text</p>
</section>
<section id="section-2">
  <p>text</p>
</section>

Is there a way I can do the following with a jquery plugin?

• On scrolling down the page, the in view (with slight offset) section's url hash adds to the url, ie: scrolling to 30px below in view of section 1 does: http://www.site.com/#section-1
• As it hits that section, it should also change the <li> of that section to active for ux purposes
• Lastly, the <li> should be clickable in the nav so the user can be taken to that section by smooth scroll.

Hoping someone has done this before and if so has an example or can point me in the right direction. Thanks

UPDATE: Found http://razorfish.github.io/Parallax-JS/ but it is too heavy with other JS. Which bits do I need to make this happen without the other bits I don't? Jsfiddle anyone?

Answer 1

There's a jQuery plugin called One Page Nav which does everything you need, with a small amount of configuration.

Just make sure to set changeHash: true for the hash changing when setting it up.

Answer 2

http://fiddle.jshell.net/dzqpG/5/show/light/

Code

$(window).on('scroll', function(){
  var scroll = $(this).scrollTop();
  if(scroll > 300){
    $('#section2').css('background','black');
    history.pushState(null, null, '#section2');
  }
});

$('#nav').on('click','a', function(event){
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $("#section2").offset().top
  }, 2000);
})

Use it as a reference point. pushState supports only from IE10 above.