0

「scrollSpy」タイプの関数を構築しようとしています。引数をオブジェクト内のいくつかの値と比較し、(数値的に) 最も高い値の名前を返す方法がわかりません。

私はいくつかのマークアップを持っています:

<ul class="nav">
    <li><a href="a"></a></li>
    <li><a href="b"></a></li>
    <li><a href="c"></a></li>
    <li><a href="d"></a></li>
    <li><a href="e"></a></li>
    <li><a href="f"></a></li>
</ul>

<section id="a" class="scrollspy"></section>
<section id="b" class="scrollspy"></section>
<section id="c" class="scrollspy"></section>
<section id="d" class="scrollspy"></section>
<section id="e" class="scrollspy"></section>
<section id="f" class="scrollspy"></section>

sectionそして、それぞれとその上からの距離 (px) で構成されるオブジェクトを作成するスクリプト:

var obj = {
    sectionOffset: {},
    scrollSpy: function (scrolled) {
        // This should look in the object with the offset values, and from all
        // the values that (scrolled) is higher than, take the largest, and
        // return its name.
    }
}


$(function () {

    $(window).scroll(function () {
        obj.scrollSpy($(document).scrollTop()); 
    });

    // Create an object consisting of all elements I want to 'spy' on.
    // Names and values are made of element ID and top offset respectively.
    $('.scrollspy').each(function () {
        obj.sectionOffset[$(this).attr('id')] = (parseInt($(this).offset().top));
    });

});

必要な要素をループすると、次のようなオブジェクトが生成されます。

{
    d: 5195,
    b: 3245,
    a: 1319,
    f: 5682,
    c: 2139,
    e: 3343
}

明確にするために、ユーザーがページを 3000px 下にスクロールすると、関数は を返す必要がありますc。

4

2 に答える 2

1 
scrollSpy: function (scrolled) {

    var highest = 0, highestName = null;

    // iterate through the offsets
    $.each(obj.sectionOffset, function(name, val) {
        // check that scrolled is higher than the value, and that it's the highest found so far
        if (scrolled > val && val > highest) {
            highest = val;
            highestName = name;
        }
    });

    return highestName;
}
于 2012-10-18T13:12:25.310 に答える
0 
$('.scrollspy').each(function () 
{
    if(($(this).offset().top + $(this).height()) > 0)
    {
       //this is the one you are looking for.

       return false; //break the loop.
    }
});

これは scrollSpyフィドルのように機能します

于 2012-10-18T12:24:30.790 に答える