CODEWITHSUNDEEP
javascriptjqueryscroll
Khan Shahrukh
Khan Shahrukh

Reputation: 6361

Change the element of a web page on scroll

I tried my best to find an answer on the web but couldn't find any so I am asking one here.

I have three images of each bottle, one empty, second half filled and third filled, I am trying to fill the empty bottle on page scroll by replacing the empty one with half filled and then half filled with the fully filled one.

Can it be achieved by .scroll function of jquery ? e.g

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

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

Upvotes: 0

Views: 69

Answers (2)

Insane Skull
Insane Skull

Reputation: 9358

Your Working Demo Example is 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();
});

Here is another JavaScript Fiddle for both type of scrolling.

Upvotes: 1

Víctor
Víctor

Reputation: 3039

You can achieve with 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();

   }
});

Upvotes: 0

Related Questions