Question

向下滚动600px后，我希望css背景图像从无图像显示到决定的背景图像（图像1）;但是，在600px以上，我想换成另一张图片（图片2）。我希望这个动作能够重复，而不必刷新页面。

这是我的代码：

jQuery的：

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 800;             
    // set to whatever you want it to be

    if(y_scroll_pos > scroll_pos_test) {
       $("square").css("background-image", "url(images/comp_rel/square.png)");
    }
    else
    {
        $("square").css("background-image","url(images/comp_rel/Box.gif)");
    }
});

我知道我错过了一些简单的东西，我只是想不出来。有什么想法吗？感谢。

Answer 1

这对我有用：

$( window ).scroll(function() {

    var y_scroll_pos = document.documentElement.scrollTop;
    var scroll_pos_test = 800;             
    // set to whatever you want it to be

   if(y_scroll_pos > scroll_pos_test) {
       $("#square").css("background-color", "#00ff00");
    }
    else
    {
        $("#square").css("background-color", "#0000ff");
   }
})

仅将css属性从background-color替换为background-image

当y轴滚动达到一定深度时，jQuery改变css背景

1 个答案: