jQuery

初心者も簡単に設置 jQuery サイドバーを固定してスクロールに合わせて追尾

scroll-side

今回は、jQueryでサイドバーをスクロールに合わせて追尾するスクリプトをご紹介したいと思います。
webページを下にスクロールしていくと、サイドが空白になっていく場合などがあると思います
そんな時にこちらのスクリプトを設置すれば、追尾させたい要素をスクロールに合わせて追尾させることが可能です。
スクロールに追尾させるのは、賛否両論あるとは思いますが、サイトの種類などにもよると思いますが、僕は使われていない要素を有効に使えるスクリプトなどで良いとは思います。
下記のサイトで紹介されていて初心者の方でもコピペで利用できると思うのでご紹介したいと思います。

最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました!

僕の方でも動作デモサイトをご用意していますので、是非ご覧くだださい。

動作デモサイト

jQuery本体の読み込み

まずは、jQueryを本体を読み込みます。
ダウンロードしたい方は下記リンク先よりjQuery本体をダウンロードして下さい。

jQuery本体をダウンロード

それでは、jQuery本体を<head>~</head>内に読み込んでいきます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

コードの記載

次にスクリプトの記載をしていきたいのですが、その前に今回適応するhtmlをご覧ください。

<body>
<header id="header">・・・</header>
<div id="content-wrap">
	<div id="content">・・・</div>
    <aside id="sidebar">
        <div class="side">・・・</div>
        <div class="scroll">・・・</div>	<!--左の要素を追尾していきます-->
    </aside>
</div>
<footer id="footer">・・・</footer>
</body>

それでは、実装に必要なスクリプトを下記になります。

<script>
$(function(){
    var target = $(".scroll");//ここに追尾したい要素名を記載
    var footer = $("footer")//フッターでストップさせる
    var targetHeight = target.outerHeight(true);
    var targetTop = target.offset().top;
 
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop > targetTop){
            // 動的にコンテンツが追加されてもいいように、常に計算する
            var footerTop = footer.offset().top;
             
            if(scrollTop + targetHeight > footerTop){
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top:  customTopPosition + "px"});
            }else{
                target.css({position: "fixed", top: "10px"});
            }
        }else{
            target.css({position: "static", top: "auto"});
        }
    });
});
</script>

上記を記載後するだけで、指定した要素をスクロールに合わせて追尾出来ますので、とても簡単に実装出来るスクリプトではないでしょうか?
プラグインも必要とせず利用できるのでとても使い勝手もいいですしファイルも増えませんので重宝できるとは思います。

動作デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS css-rgba

CSSで背景色だけを透過させる (background:rgba)

NEXT page-top

jQueryでページトップをコピペでサクッと実装方法する