当用户滚动到50px以上时,为类添加类？

Question

有谁知道如何用jQuery实现以下功能:

当用户达到#content以上50px时,我想在元素(#content)中添加一个类(.fixed).然后,当用户在#content上方向上滚动50px时,我想删除该类.

我怎么能用尽可能少的脚本来做到这一点？

<div id="header">
</div>

<div id="content">
</div>

<div id="content-2">
</div>

小提琴

Answer 1

如果我理解正确,这应该可以解决问题.

$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() >= $('#content').offset().top - 50) {
            $("#content").css("background","red");
        } else {
            $("#content").css("background","orange");
        }
    });
});

基本上,它检查用户滚动的当前位置,并将其与div的位置减去50像素进行比较.

如果您刚刚在文档中使用此代码,它应该可以正常工作.