php - 列出滚动时神奇地附在顶部的元素

Question

上下文

我有一个带有 overflow: auto 属性的 div。

在这个 div 中，我有这个:

<h3>Category 1</h3>
<ul>
    <li>blabla</li>
    <li>blabla</li>
    etc...
</ul>
<h3>Category 2</h3>
<ul>
    <li>blabla</li>
    <li>blabla</li>
    etc...
</ul>
<h3>Category 3</h3>
    etc...

我希望当我滚动时，当前类别附加到 div 的顶部，直到下一个类别。当我到达另一个类别时，它会附加顶部以代替之前的类别。

难以解释，所以我做了一张图:

我确定我在网站上看到过这个，但我不记得了。

问题

• 你知道这个的插件或有这个的网站吗？
• 你能给我一些开发它的轨道吗？

Answer 1

JSFiddle 演示 - http://jsfiddle.net/h2p6W/3/

将事件监听器附加到可滚动的 div 并测量标题在 div 中的位置。然后选择一个较小的负值并将其文本显示到您的页眉。

$('#scroller').scroll(function () {
    var positions = $('h3', this).map(function() {
            return {
                top: $(this).position().top,
                el: this
            };
        }).get();

    //Go backwards through the array and pick the first negative (smallest) value
    for(var i = positions.length - 1; i >= 0; i--) {
        if(positions[i].top < 0) {
           $('#header').text($(positions[i].el).text());
           return;
        }
    }
});

例如，如果您的可滚动 div 中有 5 个标题，并且位置是:

[-100, -50, -20, 30, 120] - 然后 -20 就是您要显示的标题。

编辑 - 重构代码

JSFiddle 演示 - http://jsfiddle.net/h2p6W/4/

$('#scroller').scroll(function () {
    var category = '';

    $($('h3', this).get().reverse()).each(function () {
        if($(this).position().top < 0) {
            category = $(this).text();
            return false;
        }
    });

   $('#header').text(category);
});