1

私は数字の配列を持っています。0,136,1084,3521,3961,5631,6510,7901,8204 (これは、1 ページのすべてのセクションの現在の scrollTops です。) 現在のウィンドウの scrollTop を取得して、これらの値の間にあるため、ページがスクロールされると、アクティブなナビゲーション項目が切り替わります。

現在、スクロール中、「現在のページ」は 0 をスキップして配列内の 1 に直行するため、最終ページをキャッチできません。

currentPage = 0;
divOffset = new Array();

function setCurrentPage() {
    divOffset = []; //this ends up as 0,136,1084,3521,3961,5631,6510,7901,8204

    //get offset and ID of each section and add to array.
    $(".section").each(function() {
        sectionOffset = $(this).offset();
        divOffset.push(Math.round(sectionOffset.top));
    }); 

    bodyOffset = $(window).scrollTop(); 

    for(i=0; i < divOffset.length; i++) {
        if( divOffset[i] >= bodyOffset ) {
            currentPage = i;
            $('#mainNav li').removeClass("active");
            $("#mainNav li #a-" + currentPage).parent().addClass("active");
            return false;
        }
    }   

}

私のナビゲーションは次のようになります。

<ul id="mainNav">
    <li class="active"><a href="#a-0" class="navA" id="a-0">home</a></li>
    <li class="menuLI"><a>works</a>
        <ul>
            <li><a href='#a-1' class='navA' id='a-1'>Websites</a></li>
            <li><a href='#a-2' class='navA' id='a-2'>Illustrations</a></li>
            <li><a href='#a-3' class='navA' id='a-3'>Photomanipulations</a></li>
            <li><a href='#a-4' class='navA' id='a-4'>Glam Guitars</a></li>
            <li><a href='#a-5' class='navA' id='a-5'>Logos</a></li>
            <li><a href='#a-6' class='navA' id='a-6'>Photography</a></li>
        </ul>
    </li>
    <li><a href="#a-7" class="navA" id="a-7">about</a></li>
    <li><a href="#a-8" class="navA" id="a-8">contact</a></li>
</ul>

ここで見ることができます: http://glowtagdesign.com/index2.php#a-0

4

1 に答える 1

2

配列がソートされていると仮定して、これを試してください：

var i;
for (i = 0; i < arr.length && pos < arr[i]; i++)
{
}
// i is now the number of items in the array less than pos
// pos is less than the first item -> 0
// pos is greater than the last item -> arr.length
于 2012-06-07T23:59:58.463 に答える