如何在水平网页的导航栏中突出显示？

Question

I can't seem to find any asked questions on this topic. I made an horizontal webpage with a smoothscroll system. The only thing I'm missing is highlighting in the navigation bar so you can see where you are on the website. Here is the largest part of the website and the thing I am trying to make work

http://jsfiddle.net/JZt3b/

$(function(){
    var sections = {},
        _width  = $(window).width(),
        i        = 0;

    // Grab positions of our sections 
    $('.section').each(function(){
        sections[this.name] = $(this).offset().left;
    });

    $(document).scroll(function(){
        var $this = $(this),
        pos   = $this.scrollLeft();

        for(i in sections){
            if(sections[i] >= pos && sections[i] <= pos + _width){
                $('a').removeClass('active');
                $('#nav_' + i).addClass('active');
            }  
        }
    });
});

I've got no idea how to make the menu highlight so you can see where you are. Please help me with this problem, I've tried several demo's but I can't figure it out.

The script I am using in the head is:

<script src=" http://s3.sitepoint.com/examples/sidescroll/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
           $(".menubar a").bind("click",function(event){
               event.preventDefault();
               var target = $(this).attr("href");
               $("html, body").stop().animate({
                   scrollLeft: $(target).offset().left,
                   scrollTop: $(target).offset().top
               }, 1200);
           });
        });
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Answer 1

if you change sections to be array instead of object you can do something like this

$(function(){
    var sections = [],//change to array []
        _width  = $(window).width();
    $('.section').each(function(){
        sections.push($(this).offset().left);//you can use push 
    });
    var $document=$(document);//you can create a variable outside the scroll event
    $document.scroll(function(){
        var pos   = $document.scrollLeft();
        $.each(sections,function(i,n){// loop for each section
            if(n >= pos && n <= pos + _width){
                $('a').removeClass('active');
                //change #nav_ for #nav_section 
                //add 1 to i as you start with nav_section1
                $('#nav_section' +(i+1)).addClass('active');
            }  
        });        

    });
});    

http://jsfiddle.net/JZt3b/2/