2013/12/03

【JavaScript】スクロール量に応じて要素を移動させる方法

【JavaScript】スクロール量に応じて要素を移動させる方法

画面のスクロール量に応じて,メニューやSNSボタンなどが追従して移動するWebサイトをよく見かけますね.ユーザーの目を引ける上に,離脱も防げて一石二鳥です.簡単に実装できますので,今回はその方法を紹介します.

目次

サンプルとソースコード

このようなスクロールに追従して移動する要素を作成します.

ソースコードは簡単で,以下のようになっています

var initPosition = $("移動させたい要素のIDかクラス名").offset().top;
    $(window).scroll(function() {
	var scroll = $(document).scrollTop();

	// 移動後ポジション
	var movePosition = initPosition + scroll + "px";
	$("移動させたい要素のIDかクラス名").animate({
	    top : movePosition
	}, {
	    duration : 500,
	    queue : false
	});

    });

ソースコードの解説

まず,移動させたい要素が初期状態(ページ読み込み時)の時,ウインドウ上端からの距離を算出します.

var initPosition = $("移動させたい要素のIDかクラス名").offset().top;

そして,スクロールが発生した場合のイベントとして,

$(window).scroll(function() {/*行いたい処理*/});

を設定します.

イベント処理の内容はこのようになっています.

//スクロール量取得
var scroll = $(document).scrollTop();

// 移動後の位置として,初期位置+スクロール量を指定
var movePosition = initPosition + scroll + "px";
$("移動させたい要素のIDかクラス名").animate({
    //要素の位置に初期位置+スクロール量を設定
    top : movePosition
}, {
    //アニメーション動作完了までの時間(ms)
    duration : 500,
    //アニメーション動作を同時に行うかどうか
    queue : false
});

アニメーションに500msの実行時間を指定することで,少し遅れて追従してきます.この時間を変更することで,移動スピードを変化させることができます.

使用する際の注意点

※トップまでスクロールして戻った場合に,位置がずれる場合があるので,movePositionに適当な値を加算したり減算して調節してください.

※queueをtrueにしてしまうと,スクロール毎の処理を順に行ってしまい,カクカクっとした動きになり,スムーズな移動を行わなくなってしまいます.

※移動させたい要素に,CSSでposition:relativeを設定しないと移動しません

まとめ

結構簡単に追従する要素を作成することが出来ます.メニューやSNSなど,様々な用途に合わせてぜひ使ってみてください.