javascript - 如何在横向网页的导航栏中突出显示？

Question

我似乎找不到任何有关此主题的问题。我用平滑滚动系统制作了一个水平网页。我唯一缺少的是在导航栏中突出显示，以便您可以看到您在网站上的位置。这是网站的最大部分，也是我正在尝试做的事情

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');
            }  
        }
    });
});

我不知道如何突出显示菜单，以便您可以看到自己所在的位置。请帮我解决这个问题，我已经尝试了几个演示，但我无法弄清楚。

我在头部使用的脚本是:

<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

如果将部分更改为数组而不是对象，您可以执行类似的操作

$(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/