jquery - 如何在到达页面底部后删除类

Question

我有一个工作脚本，当 div 到达页面顶部时，它会添加“stick”类，以便它在页面顶部保持可见。

$(document).ready(function() {
var s = $("#side-div");
var pos = s.position();                    
$(window).scroll(function() {
    var windowpos = $(window).scrollTop() ;

    if (windowpos >= 670) {
        s.addClass("stick");
    } 

    else if ($("body").height() <= ($(window).height() + windowpos)) {

         s.removeClass("stick");    

    }
    else {
        s.removeClass("stick"); 
    }
});

});

那部分有效。然而，我试图在这个 div 到达页面底部后“取消粘住”它。实际上，当页脚变得可见时，我试图将其取消粘贴。但我什至还没能到达那部分。

我确实意识到有一些插件可供我使用。

http://viget.com/inspire/jquery-stick-em

但是，我试图在不使用任何插件的情况下实现这种效果。实际上，我最想学习的是如何编写 jQuery 脚本。

如果我有兴趣解决我的问题，使用该插件会很简单。但我试图了解为什么我的 else if 部分不起作用。

感谢您的见解。

Answer 1

你做得很好，只是你的 if else 语句和条件有问题。如果你把它放在上面if (windowpos >= 670) { ，即使你到达了底部，这个条件仍然成立并且仍然会被执行。

我还看到您添加了 var pos = s.position();但从未真正使用过它，所以我认为您可能会尝试做的是如果您到达 $("#side-div") 则设置粘性的立场。

$(document).ready(function() {
    var s = $("#side-div");
    var pos = s.offset().top;  

    $(window).scroll(function() {
        var windowpos = $(window).scrollTop() ;

        if(windowpos + $(window).height() == $(document).height()){
            s.removeClass('stick');
        }else if(windowpos >= pos){
            s.addClass('stick');
        }else{
            s.removeClass('stick');
        }
    });
});   

这是一个示例 fiddle