Question

我正在努力创造一个我有一个滚动的div的东西。在div里面有＆＃34; title＆＃34;元素和滚动时我希望该部分的title元素粘在div的顶部并像标题一样保留在那里。

类似人们在网页上看到的内容，当您滚动菜单时，菜单会停留在页面上。这个例子可以在＆＃34; Day＆＃34;中的Mac OS X日历上清楚地看到。视图。

我认为我可以处理制作元素棒的部分，我看到一个有趣的解决方案，我认为我可以适应。但是我想知道是否有人可以帮我弄清楚如何知道title元素是否已经达到可滚动div的顶部。

用例如下：

<div class="container">
    <div class="floatLeft">
        <div class="scrollingDiv" style="height:100px; overflow-y:scroll; overflow-x:hidden;">
            <ul>
                <li>
                    <div>
                        <h4>Title</h4>
                        <div>Content</div>
                    </div>
                </li>
                <li>
                    <div>
                        <h4>Title</h4>
                        <div>Content</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="floatRight"></div>
</div>

我怎么知道第二个＆＃34; Title＆＃34;已经击中了我的＆＃34; scrollingDiv＆＃34;的顶部，而不是页面本身的顶部？

谢谢！

Answer 1

您可以通过将top属性设置为零并通过css设置position:absolute;来使元素变粘。

.stickyTop {
    position:absolute;
    top:0px;
}

这将确保元素始终位于页面顶部。

要确定元素是否已到达窗口顶部，您可以使用offset()来识别当前位置并检查它是否接近顶部。

$('div.scrollingDiv').scroll(function() {
    var active = null;
    $('.scrollingDiv h4').each(function(idx, val) {
        var topOffset = $(val).offset().top;
        if (topOffset < 20) // elem is 20 px from top
        {
            // Element nearest the top
            active = $(val);
        }

        console.log(active); // Element closest to the top
    });

});

以上简单地循环遍历所有h4属性，搜索最靠近页面顶部的元素，并记录它。

您可以将这些组合在一起以创建类似Funky jsFiddle的内容。

Scrolllable Div带有Sticky标题

1 个答案: