Navigation bar not working

Question

I am doing a scrolling horizontal website similar to http://www.apple.com/mac-pro/ (they seemed to have changed it) but mine is horizontal. However, I am experiencing a problem where the 6 white navigation bars do not light up and correspond to the page that is being navigated to. My code is as follows below. Thanks in advance! Here is an example http://jackyeu.com/sp3beta/ I am trying to do the navigation circles on the right side.

$(function(){
    var _left = $(window).scrollLeft();
    var individualDivWidth = 1024;

    $(window).scroll(function(){
        var _cur_left = $(window).scrollLeft();
        var totalWidth = $('#container').width();
        var posToScroll = Math.round(_cur_left / individualDivWidth) * individualDivWidth;

        TweenMax.to($('html, body'), 0.5, {scrollLeft: posToScroll, overwrite:true});


if ($(window).scrollLeft() >= $('#index_container').width() )
{
        $(".b1").css({ background: "#569EB2"});
        $(".b2").css({ background: "#FFF"});
        $(".b3").css({ background: "#FFF"});
        $(".b4").css({ background: "#FFF"});
        $(".b5").css({ background: "#FFF"});
        $(".b6").css({ background: "#FFF"});
}

if ($(window).scrollLeft() >    = $('#page1_container').width() )
{
        $(".b1").css({ background: "#FFF"});
        $(".b2").css({ background: "#569EB2"});
        $(".b3").css({ background: "#FFF"});
        $(".b4").css({ background: "#FFF"});
        $(".b5").css({ background: "#FFF"});
        $(".b6").css({ background: "#FFF"});
}


    });<!-- end of scroll funcion -->'

Answer 1

Looking at the source of the second link you provided (here) you can see a reference to <script src="js/parallax.js"></script>

With this code:

/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
  var section1Top =  0;
  // The top of each section is offset by half the distance to the previous section.
  var section2Top =  $('#shoe-kits').offset().top - (($('#details').offset().top - $('#shoe-kits').offset().top) / 2);
  var section3Top =  $('#details').offset().top - (($('#about').offset().top - $('#details').offset().top) / 2);
  var section4Top =  $('#about').offset().top - (($(document).height() - $('#about').offset().top) / 2);;
  $('nav#primary a').removeClass('active');
  if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
    $('nav#primary a.campaign-banner').addClass('active');
  } else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
    $('nav#primary a.shoe-kits').addClass('active');
  } else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
    $('nav#primary a.details').addClass('active');
  } else if ($(document).scrollTop() >= section4Top){
    $('nav#primary a.about').addClass('active');
  }
}

this is bound to the window scroll event at the top of this file like so:

/* Scroll event handler */
$(window).bind('scroll',function(e){
  redrawDotNav();
});

What this code is doing is fetching the offsets of each section (and not storing these in some var with a higher scope (shame on them :P) then comparing the current scroll height to each of these to figure out which section you have scrolled to.