更改滾動頁面上的元素

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

您可以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(); 

    } 
}); 

Answer 2

你的工作演示示例實現是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兩種類型的滾動。