スクロールイベントで要素の表示を振り分ける

パターン1:要素がページ内に入ったら表示する

デモ：http://mo49.tokyo/qiita/20160324/fadeInDown.html

若干上から降りてくるアニメーションを定義

css

.js-fadeInDown {
    animation-fill-mode:both;
    animation-duration:1s;
    animation-name: fadeInDown;
    visibility: visible !important;
}
@keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

スクロールが閾値を越えたら.js-fadeInDownを追加

javascript

$('.js-scrollTarget').css('visibility','hidden');
$(window).scroll(function(){
    var $windowHeight = $(window).height(),
        $topWindow = $(window).scrollTop();
    $('.js-scrollTarget').each(function(){
        var $targetPosition = $(this).offset().top;
        if( $topWindow > $targetPosition - $windowHeight + 100 ){
            $(this).addClass("js-fadeInDown");
        }
    });
});

パターン2:閾値を境にfadein/fadeoutを切り替える

aboutセクションより下にいったら「トップに戻る」ボタンをfadein。
上に戻ったときはfadeoutする。

javascript

$gototop.css('display','none');
$(window).scroll(function(){
    var $windowHeight = $(window).height(),
        $topWindow = $(window).scrollTop(),
        $targetPosition = $('.sec-about').offset().top;
    if( $topWindow > $targetPosition - $windowHeight ){
        $gototop.fadeIn();
    }else{
        $gototop.fadeOut();
    }
});