Javascript 带粘性标题的可滚动Div

我正在尝试做一些我有一个滚动的div的东西。在div中有“title”元素，当我滚动时，我希望该部分的title元素粘贴到div的顶部，并像标题一样保持在那里

有点像人们在网页上看到的，当你滚动时，菜单会贴在页面的停止位置。在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>

标题
所容纳之物


标题
所容纳之物

我怎么知道第二个“标题”何时到达了我的“scrollingDiv”的顶部，而不是页面本身的顶部

---

谢谢

通过将元素的

top

属性设置为零，并将设置

位置：绝对，可以使元素具有粘性通过css

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

});

$（'div.scrollingDiv'）.scroll（函数（）{
var-active=null；
$（'.scrollingDiv h4'）。每个（函数（idx，val）{
var topOffset=$（val）.offset（）.top；
if（topOffset<20）//elem距离顶部为20px
{
//最靠近顶部的元素
活动=$（val）；
}
console.log（活动）；//最靠近顶部的元素
});
});

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

您可以将这些内容组合在一起创建一个类似于.
的东西，如果您可以为您的问题创建JSFIDLE.@SandeProop-或者尝试解决它，然后返回一个更具体的问题，而不是我们做家庭作业，那就更好了。检查一下这个插件：谢谢你的插件…..并且关于这个插件问题的hazing:）和其他插件一样。它基于页面顶部，而不是包含div的顶部。