php – 列出滚动时神奇地附着顶部的元素

上下文

我有一个溢出的div：auto property.

在这个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的顶部,直到下一个类别.当我到达另一个类别时,它会将顶部连接到前一个位置.

很难解释,所以我做了一个图像：

我确定我在网站上看到了这个,但我不记得了.

问题

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

解决方法:

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);
});