jQueryでページスクロールの指定箇所で要素の表示・非表示を切り替える関数作ってやんよ!!!

ページをスクロールして、対象のブロック要素がある一定の位置まで来たらその要素の表示・非表示を切り替えるライブラリー関数を作成。

デモページ

実際の切り替え処理を行ったデモページがこちら

各ファイルの記述

HTMLの記述

<section>
    <div id="hoge">ページスクロール 0px</div>    <!-- 解説① -->
    <div id="aaa">#aaa要素</div>    <!-- 解説② -->
</section>

CSSの記述

/* 相対要素の指定 */
section {
    position:relative;
    background: #1e5799;
    height:5000px;
}
 
/* 表示・非表示する要素の指定 */
#aaa {
    position:fixed;
    width:200px;
    height:200px;
    top:0;
    background:#000;
    color:#FFF;
    text-align:center;
    display:none;
}
 
/* テストテキスト用の指定 */
#hoge {
    position:fixed;
    right:50%;
    font-size:36px;
}

JavaScriptの記述

$(function(){
/************************************************
        フィールド指定
*************************************************/     
var aaa = $("#aaa");    //解説③
var bbb = 2000;        //解説④
 
/*************************************************
        実行プログラム
**************************************************/
$(document).ready(function(){
    funcScrollToglle(aaa,bbb);   //解説⑤
});
 
/**************************************************
        処理関数
***************************************************/
function funcScrollToglle(){
        $(window).scroll(function(){
            var ccc = aaa.offset().top;    //解説⑥
            $("#hoge").text("ページスクロール" + $(this).scrollTop() + "px");    //解説⑨
            if(bbb <= ccc){
                aaa.fadeIn();    //解説⑦
            }else if( bbb >= ccc){
                aaa.fadeOut();    //解説⑧
            }
        });
    };
 
});

処理解説

• ①テスト用に現在ページがどこまでスクロールされたのかを出力する要素#hogeと指定（本来記述は不要）
• ②表示・非表示させたい要素#aaaと指定する。（※CSSで初期状態をdisplay:noneで非表示、position:fixedで固定）
• ③フィールド値として指定要素#aaaをグローバル変数aaaに代入。
• ④表示・非表示の切り替えポイント（ピクセル値）を同じくグローバル変数bbbに代入。（デモでは2000pxと指定）
• ⑤処理を実行させたいところでfuncScrollToglle関数の第一引数に変数aaa,第二引数に変数bbbを代入し実行させる。
• ⑥#aaa要素（変数aaa）が相対要素からスクロールされた値を変数cccに代入。
• ⑦ページ全体から指定要素#aaaが代入された変数aaaがスクロールされた値が変数bbbで指定した値以上スクロールされた場合に要素#aaaを表示させる処理。
• ⑧スクロール値が上記以下の場合は非表示する処理。
• ⑨テスト用にページ全体からスクロールされている現在の値をテキスト出力させる処理