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

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();

.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:

$(文档).ready(函数() { 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