今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。
あまり使う機会はありませんが、覚えておくといざというときに便利です。それでは早速使い方のご紹介
必要なデータを揃える
まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。
ここではファイル名を下記の通り保存しました。
- jquery.js
- jquery-ui.js
- jquery.easing.js
- jquery.scrollfollow.js
ディレクトリはこのようになりました( jsフォルダの中にダウンロードした jsファイルが全て入っています)。
HTMLからjsデータを読み込む
フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。
{path}の部分はHTMLファイルからのパスにしてください。<script type="text/javascript" src="{path}/jquery.js"></script><script type="text/javascript" src="{path}/jquery-ui.js"></script><script type="text/javascript" src="{path}/jquery.easing.js"></script><script type="text/javascript" src="{path}/jquery.scrollfollow.js"></script><script type="text/javascript">次にフロートさせる要素のIDとオプションの設定をします。ここでは #sideBar をフロートさせる要素のIDとして指定しています。このID指定を間違えると動かないので気をつけましょう
<script type="text/javascript">$( document ).ready( function (){ $('#sideBar').scrollFollow({});});//オプション$( document ).ready( function () { $( '#sideBar' ).scrollFollow( { //アニメーションの速度の設定。0 にするとアニメーションなしになります。 speed: 500, //ブラウザの領域とフロート要素との余白。0にするとぴったりくっつきます。 offset: 0 } );} );</script>最後に、フロートさせる要素に position: relative; か position: absolute; を指定します。
これで完了です。
◆サンプル
▼HTMLデータのダウンロードjsファイルは再配布すると怒られちゃうかもしれませんので、自力でダウンロードしてください・・・!
—————
ブラウザ側の実装が不十分な position: fixed; の代わりに使うことでデザインの幅も広がりそうですね。
広告