0

What I found so far - and like, and use - is:

Click here (previous stackoverflow quest.)

or check out the the edited Demo: (by Jai)

$(document).ready(function(){
    //hold box offsets from top
    yArr = new Array();
    for(var i=1; i<$(".box").size(); i++){
        yArr[i] = $('#box' + i).offset().top;
    }    

    //checks if box is off screen
    function boxOffScreen(i){
        if ((yArr[i] - $(window).scrollTop()) < 20) return true;
        return false;
    }
    
    //animates box
    function boxAnimate(animateTo, i){
        if(animateTo == "fade"){
            $('#box' + i).stop().fadeTo(100, 0);
        } else{
            $('#box' + i).stop().fadeTo('fast', 1);
        }
    }
    
    //checks if it needs to fade/unfade
    function triggerAnimate(i){
        if (boxOffScreen(i)){
            boxAnimate("fade", i); 
            return;
        }
        boxAnimate("unfade", i);
    }
    
    $(window).scroll(function () {
        for(var i=0; i<$(".box").size(); i++){
            triggerAnimate(i);
        }
    });  
});
.box{
    width: 350px;
    height: 200px;
    background: #8AC9D0;
    margin:50px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>

Demo

But I would like to add fade in and fade out also at the bottom of the page. The goal would be to see like 2 or 3 elements fully and the upcoming element (when you scroll down) or the previous element (when you scroll back up again) fades in smoothly.

Any ideas, any code or hint?

Thanks a lot.

Community
  • 1
  • 1
stast
  • 25
  • 4

1 Answers1

0

Here's how you can check if an element is below screen bottom:

$element.offset().top + $element.height() > $(window).scrollTop() + $(window).height()

Check it out here: JSFiddle

Johan Karlsson
  • 6,419
  • 1
  • 19
  • 28