0

我有 3 个内容框，并且都有一个带有指向下面内容框的锚链接的菜单！（链接是包括和动态的）

昨天我收到了有关脚本的帮助。当我有一个大的内容框时，它的工作非常好。

见这里：http: //jsfiddle.net/wv9EQ/7/

现在当我有一个小的内容框时我遇到了问题

见这里：http: //jsfiddle.net/wv9EQ/8/

例如，当我在框 2 和框 3 之间时，两个锚都变得活跃。有什么想法可以解决这个问题吗？我只想为我目前在里面的盒子设置一个活动锚

我使用这个脚本：

$(function(){
    var sections = {},
        _height  = $(window).height(),
        i        = 0;

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

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

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

    $('.head-nav-button').click(function()
    {
        $('a').removeClass('active');
        $('.nav_' + $(this).attr('href').replace('#', '')).addClass('active');
    });
});
4

2 回答 2

1

将部分设置为活动后离开该功能：http: //fiddle.jshell.net/doktormolle/nCasy/

于 2012-11-10T12:33:40.613 回答
1

使用偏移量并break在第一个激活的菜单之后似乎有效：

琐碎的部分：

offset   = 50; // Should be at least the height of your nav bar

if(sections[i] - pos + offset > 0){
    $('a').removeClass('active');
    $('.nav_' + i).addClass('active');
    break;            
}

小提琴的完整代码在这里：http: //jsfiddle.net/wv9EQ/10/

于 2012-11-10T12:51:36.833 回答