Question

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

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

如何使用尽可能少的脚本执行此操作？

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

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

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

FIDDLE

Answer 1

如果我理解正确，这应该可以解决问题。

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

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

如果您刚刚在文档中使用此代码，它应该可以正常运行。

Answer 2

试试这个，

$(window).scroll(function() {

    if ($(this).scrollTop() > 50){  
        $('#content').addClass("content_fixed");
    }
    else{
        $('#content').removeClass("content_fixed");
    }
});

演示：http://jsfiddle.net/UI_Designer/8j0a1Lkk/1/

Answer 3

您可以使用jquery插件航路点（http://imakewebthings.com/waypoints/）来检测用户何时滚动到该区域，然后使用javascript .innerhtml函数更改html代码。这种方法的一个问题是你必须有另一个元素只包围你的主元素。

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

3 个答案: