javascript - 更改滚动网页的元素

Question

我尽力在网上寻找答案，但找不到答案，所以我在这里提问。

每个瓶子有三张图像，一张是空的，第二张是半满的，第三张是满的，我试图通过用半满的瓶子替换空瓶子，然后用满的瓶子替换半满的瓶子来填充页面滚动上的空瓶子。

可以通过jquery的.scroll函数实现吗？例如

$("#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对于两种类型的滚动。