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脚本。

如果我有兴趣解决我的问题，使用插件会很简单＆amp;简单。但我想知道为什么我的其他部分不起作用。

感谢您的任何见解。

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

示例

Answer 2

设置减号而不是加号......你会在“else”语句下看到我的例子中的蓝色。

工作小提琴 http://jsfiddle.net/4YaPw/

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

        if (windowpos >= 670)
        {
            $("#side-div").css('background-color', '#8a7b70'); //grey
        } 

        else if ($("body").height() <= ($(window).height() - windowpos))
        {
            $("#side-div").css('background-color', '#ff5400'); //orange
        }
        else
        {
            $("#side-div").css('background-color', '#6f8cc0'); //blue
        }
    });
});

如何在到达页面底部后删除一个类

2 个答案: