CODEWITHSUNDEEP
javascriptjqueryscrollto
Dave
Dave

Reputation: 687

Setting url hash based on section scrolled to?

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?

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?

Upvotes: 0

Views: 1344

Answers (2)

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

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.

Upvotes: 2

ɴᴀᴛᴇ ᴅᴇᴠ
ɴᴀᴛᴇ ᴅᴇᴠ

Reputation: 4611

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.

Upvotes: 1

Related Questions