Fade In div when it's scrolled into viewport

Question

Okay, so I've been searching for a simple way to fade in a div when a user scrolls it into view, but I can't find a straight solution.

HTML

<div class="container">

<div class="topdiv">This is a 100% height div. User scrolls down from here.</div>

<div class="fadethisdiv">This content should be faded in 
once .fadethisdiv is [so many]px into the bottom of the viewport.
Let's use 150px as an example.</div>

</div>

CSS

.container {
       width:100%;
       height:600px;
}

.topdiv {
       height:100%;
       background-color:#09f;
       text-align:center;
       font-size:24px;
}

.fadethisdiv {
       height:100%;
       background-color:#36afff;
       text-align:center;
       font-size:24px;
}

JS

// Talk to me.

Here's a fiddle: http://jsfiddle.net/kz2z5/2/

Sterling Graham · Accepted Answer · 2014-04-20T09:57:13.873

Here's a solution that triggers the fadeIn jQuery function after scrolling by the .topdiv div.

It subtracts the viewport size from the scrollTop function to get the bottom of the scroll position, and then checks whether its value is greater than the height of the .topdiv div plus the 150px or however far down you'd like it to fadeIn at.

Since the div must initially be displayed on the page so that we have somewhere to scroll down to we set the visibility to hidden instead of using display:none. We're using fadeIn, which expects the element to start with display:none, so we hide the .fadethisdiv div and fade it in.

We then remove the scroll listener so that the element doesn't continuously hide and fadeIn after we have scrolled past the .fadethisdiv div.

$(window).scroll(function () {
    console.log($(window).scrollTop());
    var topDivHeight = $(".topdiv").height();
    var viewPortSize = $(window).height();

    var triggerAt = 150;
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

    if ($(window).scrollTop() >= triggerHeight) {
        $('.fadethisdiv').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});

Fiddle

Only issue is that it only seems to work for a top div, then one div below it. Can you amend for the faded div to then fade another, identical div, below that. Call this div .seconddiv, for example? Thanks! — benbuffone, Apr 20 '14 at 16:37
To do this I added the `.topdiv` and `.fadethisdiv`'s height together instead of just adding the `.topdiv`. I've given namespaces to the scroll handlers in this case, so that only the handler that is currently being faded is removed. [Fiddle](http://jsfiddle.net/YT2JH/) — Sterling Graham, Apr 20 '14 at 18:57

score 6 · Answer 2 · answered Jul 26 '17 at 20:39

I found the library AOS very useful for this purpose (https://github.com/michalsnik/aos#-animations). Additionally to fade in when your div comes into the viewport, other effects are available. See example below

<script src="js/aos.js"></script>
<link href="css/aos.css" rel="stylesheet" />

<div id="content1" data-aos="flip-down" data-aos-delay="0">
     <p>Some content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        AOS.init();
        AOS.refreshHard();  //optional
    });
</script>

score 0 · Answer 3 · edited Feb 09 '15 at 18:18

Here is solution, is set on 300px

$(document).ready(function(){
var view = {};

var checkPosition = function(){
   var elem = $('.fadethisdiv'), top = elem.offset().top;

                if (top - view.limit < 300) {
                    elem.css('display','none'); 
                }
            };

       $(window).bind('scroll', function() {

            view.top = $(window).scrollTop();
            view.limit = view.top + $(window).height();

            checkPosition();
        }); 

});

http://jsfiddle.net/kz2z5/4/

Enjoy! :)

Fade In div when it's scrolled into viewport

3 Answers3

Linked