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

オフセットを使用し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 に答える
1

セクションをアクティブに設定した後、機能を終了します: http://fiddle.jshell.net/doktormolle/nCasy/

于 2012-11-10T12:33:40.613 に答える