0

I would like to create a sidenavigation bar simply for the different sections on one of my scroll intensive webpages. What I would like to do is have the navigation bar indicate which part of a site is being viewed. An example of this is http://www.ifc.com/back-to-portlandia/#welcome. The navigation bar on the right with the six circular buttons labled 1 through six actually each turn orange when that corresponding part of the website is being viewed.

How would I do that?

etangins
  • 624
  • 3
  • 11
  • 23

1 Answers1

0

So here's what I did for you. I made many slide and with their height I can know when the user change of slide. When he does that, I remove the class .current and I put it to the next li. For the moment, it only works when you're scrolling down, but with some adjustment you could easily do the samething while the user scroll up.

Here's the fiddle

My Javascript look like this : 

$(document).scroll(function() {
    if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
        $('.current').removeClass('current');
        var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
        $('.navigation li:eq('+newSlide+')').addClass('current');
    }
});
SauriolJf
  • 412
  • 2
  • 10
  • It seems to work perfectly in the fiddle, but when I copy it over to a new document, it doesn't function. I've been having this problem a lot transferring from fiddles to actual document. I put it up at http://tsawebmaster1.hhstsa.com/sidenav.html. Am I doing something wrong? – etangins Apr 16 '14 at 20:46
  • You need to link jQuery library. An easy way to do this is to add in your page `­` – SauriolJf Apr 16 '14 at 21:12
  • To make it work going up, I just flipped the < and > signs and replaced +newSlide+ with -newSlide- and it seems to work. Thanks for your help! – etangins Apr 16 '14 at 22:04
  • I'm glad to have helped ! Please vote up my answer if you have 2 seconds. – SauriolJf Apr 16 '14 at 22:38
  • I need a reputation of 15, but I would if I had it. I put yours as the one that worked – etangins Apr 17 '14 at 02:24
  • Actually I have just one more question. If I wanted instead of having the li change color to orange, to have each one change their background image, but it would need to be a different background image for each one, how would I modify the code? – etangins Apr 17 '14 at 02:48
  • I just figured it out, but how would I use this if each of my sections (slides in this example) were different heights. It seems to be programmed only to work at the height set for the slide class as a whole. – etangins Apr 17 '14 at 21:58