Question

我似乎无法就此主题找到任何问题。我制作了一个带有smoothscroll系统的横向网页。我唯一缺少的是在导航栏中突出显示，以便您可以看到您在网站上的位置。这是网站的最大部分，也是我努力工作的东西

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

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

1 个答案: