Question

当我向上/向下滚动时，我有一个固定的div在我的文档中移动。一旦我到达文档中特定div的顶部，我正在寻找动画这个div的方法。动画将是非常简单的css，包括将其背景颜色更改为另一种颜色;当且仅当我滚动到特定div的顶部。

更实用的参考：如果我高于div A，我的固定div（div B）的背景颜色将为蓝色;一旦我滚动到A的顶部，B的背景颜色将为红色。如果我再次滚动到A的顶部，固定div的背景颜色将变为蓝色......依此类推。

我的jQuery代码：

(function($){
    $(document).ready(function() {
        var swapColors = 1; // used to swap colors on the #fixedDiv

        $(window).scroll(function () {
            if(swapColors) {
                --swapColors;
                if ($(window).scrollTop >= $('#landmarkDiv').offset().top) {
                    $('#fixedDiv').animate(
                        {
                        "background-color": "red"
                        }, "slow"
                    );
                }                   
            }
            else {
                ++swapColors;
                if ($(window).scrollTop < $('#landmarkDiv').offset().top) {
                    $('#fixedDiv').animate(
                        {
                        "background-color": "blue"
                        }, "slow"
                    );
                }  
            }
        }
    }
})(jQuery);

Answer 1

您的代码中存在许多问题。

你有一个额外的花括号。函数（查询）不是必需的。没有它就可以工作。

$（window）.scrollTop最后需要一个（）。

$(window).scrollTop();

backgroundcolor上的 .animate（）函数存在问题。您可能需要额外的库让jquery在颜色上做动画。相反，我们可以使用css（）和webkit-transition。

HTML：

</div>
<div id="testDiv">
    Test div
</div>
<div id="landmarkDiv">
    landmark
</div>

CSS：

#fixedDiv {
        position: fixed;
        top:0px;
        width: 100%;
        height:50px;
        background-color: #456456; 
        -webkit-transition: all 3s;
    }

    #testDiv {
        width: 600px;
        height: 1200px;
    }

    #landmarkDiv {
        width: 100%;
        height: 1000px;
    }

JQuery的：

$（document）.ready（function（）{ var swapColors = 1; //用于交换#fixedDiv

上的颜色

$(window).scroll(function () {
    var windowScrollPosition = $(window).scrollTop();
    if(swapColors) {
        --swapColors;
        if (windowScrollPosition >= $('#landmarkDiv').offset().top) {
            $('#fixedDiv').css('backgroundColor', "red");
            console.log(windowScrollPosition, 'more');
        }                   
    }
    else {
        ++swapColors;
        if (windowScrollPosition < $('#landmarkDiv').offset().top) {
            $('#fixedDiv').css('backgroundColor', "blue");
            console.log(windowScrollPosition, 'less');
        }  
    }
});

}）;

这里的工作测试： www.gdiction.com/scroll

jQuery - 滚动到顶部div后，我想动画/恢复固定的div

1 个答案: