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

Question

上下文

我有div overflow: auto属性。

在这个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

您可以向每次用户滚动窗口时更新的窗口添加eventListener。然后，将标题的顶部位置与当前滚动位置进行比较。如果滚动位置大于标题的位置，请更改标题。否则，或者如果标题已经调整大小，则不要做任何事情。

这是一些示例代码。随意根据自己的喜好定制。

<div style="position:fixed;right:0px;" id="place">Category 1</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>
<ul>
    <li>blabla</li>
    <li>blabla</li>
    etc...
</ul>


<script>

var headers = document.getElementsByTagName("h3");

var place = document.getElementById("place");

addEventListener("scroll", function(e) {

    var scroll = document.body.scrollTop;
    var foundHeader = false;

    for(var i = headers.length-1; i >= 0; i--) {

        var h = headers[i];
        var top = h.offsetTop;


        if(!foundHeader && scroll+50 > top) {
            place.innerHTML = h.innerHTML;
            foundHeader = true;
        }




    }

}, true);

</script>

编辑：更改代码以执行您要执行的操作。

Answer 2

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

Answer 3

以下是一些示例以及如何：http://www.mustafaozcan.net/en/page/jQuery-Fixed-Table-Header-Plugin.aspx

Answer 4

Twitter引导程序有一些类似的功能：fixed navbar和scrollspy。