低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

フローティングメニューの使い方(スクロールするメニュー)

今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。
あまり使う機会はありませんが、覚えておくといざというときに便利です。

それでは早速使い方のご紹介

必要なデータを揃える

まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。

ここではファイル名を下記の通り保存しました。

  • jquery.js
  • jquery-ui.js
  • jquery.easing.js
  • jquery.scrollfollow.js

ディレクトリはこのようになりました( jsフォルダの中にダウンロードした jsファイルがすべて入っています)。

HTMLからjsデータを読み込む

フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。
{path}の部分はHTMLファイルからのパスにしてください。

1<script type="text/javascript" src="{path}/jquery.js"></script>
2<script type="text/javascript" src="{path}/jquery-ui.js"></script>
3<script type="text/javascript" src="{path}/jquery.easing.js"></script>
4<script type="text/javascript" src="{path}/jquery.scrollfollow.js"></script>
5<script type="text/javascript">

次にフロートさせる要素のIDとオプションの設定をします。ここでは #sideBar をフロートさせる要素のIDとして指定しています。このID指定を間違えると動かないので気をつけましょう

01<script type="text/javascript">
02$( document ).ready( function (){
03    $('#sideBar').scrollFollow({});
04});
05 
06//オプション
07$( document ).ready( function () {
08    $( '#sideBar' ).scrollFollow( {
09        //アニメーションの速度の設定。0 にするとアニメーションなしになります。
10        speed: 500,
11        //ブラウザの領域とフロート要素との余白。0にするとぴったりくっつきます。
12        offset: 0
13    } );
14} );
15</script>

最後に、フロートさせる要素に position: relative; か position: absolute; を指定します。
これで完了です。
◆サンプル
▼HTMLデータのダウンロード

jsファイルは再配布すると怒られちゃうかもしれませんので、自力でダウンロードしてください・・・!

—————

ブラウザ側の実装が不十分な position: fixed; の代わりに使うことでデザインの幅も広がりそうですね。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ