スクロールしても追いかけてくる広告の作り方

Making Tracks By: RVWithTito

最近、スクロールするとサイドバーの広告が追いかけてくるWebサイトを良く見かけます。

自分のサイトでもやってみたかったので、jQueryを使って実装してみました。

意外と簡単なので実装方法を紹介します。

スクロール時に追いかけてくる処理の実装

jQuery
var setBoxId = '#box';      // スクロールさせる要素
var initOffsetTop = null;   // 要素の初期位置

// HTMLの要素が全て準備できれば処理を行う
$(document).ready(function() {
    // 初期位置取得
    initOffsetTop = $(setBoxId).offset().top;
});

var timer = false;          // timer処理のキャンセル用フラグ
$(window).scroll(function() {
    if (timer !== false) {
        clearTimeout(timer);    // Timer処理のキャンセル
    }
    // timer処理
    timer = setTimeout(function() {
        scrollbox();
    }, 500);
});

// スクロール処理
function scrollbox(){
    // 初期位置が取れていなければ処理を抜ける
    if(initOffsetTop == null) return;
    
    // 現在のスクロール位置を取得
    var scrollTop = $(document).scrollTop();

    // スクロールさせる要素の初期位置と現在のスクロールの位置+50を比較
    // ※+50は調整用(要素の動作に合わせて任意に変更)
    if(initOffsetTop < scrollTop + 50)
    {
        // ウィンドウの上から50pxの位置
        var absolutePos = (scrollTop + 50) - initOffsetTop;
        // positionを設定
        $(setBoxId).css('position', 'absolute');
        // topの位置を設定
        $(setBoxId).animate({top: absolutePos}, {duration: 500});
    }
    else
    {
        // 設定したスタイルを削除
        $(setBoxId).animate({top: ''}, {duration: 500});
    }
}

これでスクロールの処理は完成です。

注意点として、この処理を適応させる要素の親要素にposition:relativeを指定する必要があります。

position:relativeが必要なのは、jQueryで以下のposition:absoluteを指定しているためです。

jQuery
        // positionを設定
        $(setBoxId).css('position', 'absolute');
        // topの位置を設定
        $(setBoxId).animate({top: absolutePos}, {duration: 1000});

DEMO

divider

Trackback URL

http://webnonotes.com/javascript-2/jquery_scroll/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>