CODEWITHSUNDEEP
jqueryfadein
Ryan Brennan
Ryan Brennan

Reputation: 9

Make multiple images fade in at different page positions jquery

I am trying to have an img fade in at a certain page position, then have another img fade in at a different page position... How can I achieve this, my code is below. Right now I only have it set for one img, can't figure out how to add a second one with different page position.

var startY = 20

$(window).scroll(function(){
checkY();
});

function checkY(){
if( $(window).scrollTop() > startY ){
    $('#head_bar').fadeIn();
}else{
    $('#head_bar').fadeOut();
}
}

// Do this on load just in case the user starts half way down the page
checkY();

Upvotes: 0

Views: 86

Answers (1)

Ryan Brennan
Ryan Brennan

Reputation: 9

I got this to work, not sure if it's reliable, works on safari chrome and firefox... 

var startY = 20
var startX = 170

$(window).scroll(function(){
checkY();
});

function checkY(){
if( $(window).scrollTop() > startY ){
    $('#head_bar').fadeIn();
if($(window).scrollTop() > startX ) 
    $('#video_img').fadeIn();
}else{
    $('#head_bar').fadeOut();
    $('#video_img').fadeOut();

}
}

Upvotes: 1

Related Questions