Dec 5, 2013

【jQuery】スクロール時に指定位置で要素を固定させるscrollfix.js

スクロールしてもサイドバーの一部が消えずについてくるサイト、最近よく見掛けますよね。どうしても真似したくて当サイトでも導入しました。

左サイドバーの新着記事とサイト内検索のボックスがそうです。メニューや更新情報など、常に表示しておきたい要素に使うとより効果的ではないでしょうか。

設置の方法・手順はいたってシンプル。


  • まずはサンプルを参照いただいた上で以下をご覧ください。

    • まずはjQuery本体をhead内に設置

    多様なjQueryの機能を利用するために必要な親玉？をサーバに設置するか、Google Developersから引っ張ってくる必要があります。VerUPのたびに削除したりするのは面倒なので個人的には後者をお勧めします。既にバリバリjQueryを使っている方はここは飛ばしてください。
    <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"/></script>
    HTMLソースのhead内に上記のコードを埋め込みます。

    先々jQueryの挙動に不審を感じたら本家サイトかGoogleDevelopersでバージョンを確認してみてもいいでしょう。

    同じくhead内にscrollfixのコードを追加

    これはできればheadの閉じタグ直前に設置するのをおすすめします。他のスクリプトとの実行順の兼ね合いも重要です。
    <script type="text/javascript">
/*スクロール固定*/
$(window).load(function() {
	var tab = $('.scrollfix'), //固定したい要素名
    offset = tab.offset();

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    tab.addClass('fixed');
  } else {
    tab.removeClass('fixed');
  }
});
});
</script>

    スタイルシートで固定したい要素やその周辺を指定

    /*親要素*/
#side {
    width: 340px;
    position: relative;
    float: left;
}
/*固定したい子要素*/
.scrollfix {
    width: 340px;
    height: 200px;
    background: #ff0000;
}
/*子要素を固定する位置（TOPからの距離）*/
.fixed {
    position: fixed;
    top: 100px;
}
    positionプロパティによる親子関係があって成り立つ挙動です。ネスト（入れ子）構造とposition指定に誤りが無いことを確認しましょう。また、固定位置を指定するクラス.fixedはbody内に記述する必要はありません。

    ついでに複数設置したい場合

    var tab = $('.scrollfix , .scrollfix2 , .scrollfix3'),
    たとえば3カラム構成などで2カラム同時に要素を固定しつつ異なるスタイルを指定したい場合は、scrollfixコードの2行目で要素名を追加すればOKです。


    今回参考にさせていただいたのはこちらのエントリ。すごく丁寧なうえにIE6への対応もレクチャーされてます。
    スクロール途中から位置が固定されるナビゲーションを作ってみる | Unformed Building

    
    サイト内検索

    • Author

    • Twitter

        Follow @jay0926 ( followers)

      1. Facebook