Question

我有3个内容框，并且都有一个菜单，其中包含指向以下内容框的锚点链接！（链接包含在内并且是动态的）

昨天我received help with the script ..当我有一个大的内容框时，它的工作非常好。

现在我遇到一个问题，当我有一个小内容框

当我在例如方框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');
    });
});

Answer 1

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

Answer 2

在第一个激活的菜单之后使用偏移和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/

使用jquery找到锚点并设置为活动状态

2 个答案: