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 ```

This is a 100% height div. User scrolls down from here.

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.

``` 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/

Accepted Answer

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

Fade In div when it's scrolled into viewport

Solution

Problem