Question

我尽力在网上找到答案，但无法找到，所以我在这里问一个。

我每个瓶子有三张图片，一张是空的，第二张是半满的，第三张是填充的，我试图在页面滚动中填充空瓶子，将空的一个用半满的填充，然后用充满的一半填充。

可以通过jquery的.scroll函数实现吗？ e.g

$("#first-div").scroll(function() {
$("#first-div").hide();
$("#second-div").show();
});

$("#second-div").scroll(function(){
$("#second-div").hide();
$("#third-div").show();
)

Answer 1

您的工作演示示例为Here

$(document).ready(function(){
   $("#second-div").hide();    
   $("#third-div").hide();
});   
$("#first-div").scroll(function() {
   $("#first-div").hide();
   $("#second-div").show();
});
$("#second-div").scroll(function(){
   $("#second-div").hide();
   $("#third-div").show();
});

这两种滚动类型都是另一个JavaScript Fiddle。

Answer 2

您可以使用scrollTop

来实现

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number && height  < some_number_2) {
        $("#first-div").hide();
        $("#second-div").show();
    } else if (height  > some_number_2 ){
       $("#second-div").hide();
       $("#third-div").show();

   }
});

滚动时更改网页的元素

2 个答案: