2

我有一个工作脚本，它在 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 部分不起作用。

感谢您的任何见解。

4

2 回答 2

2

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

我还看到您包含了 avar 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');
        }
    });
});

这是一个示例小提琴

于 2013-11-03T03:30:28.103 回答
1

设置减号而不是加号...您将在我的示例中的“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
        }
    });
});
于 2013-11-03T00:13:19.723 回答