WEB制作のメモ帳

衆トップページ -> WEB制作のメモ帳 -> jquery -> jquery「Scroll Follow」でスクロールしてもついてくるメニュー

jquery「Scroll Follow」でスクロールしてもついてくるメニュー

2011-05-26

jquery

jquery「Scroll Follow」でスクロールしてもついてくるメニュー

求人サイトやECサイトなどカートを何度も使う必要のあるサイトの場合、カートに入れるや検索フォームなど、よく使う項目は常に表示されているほうが便利。
サイドメニューを固定する方法もあるけど、スクロールにあわせてサイドメニューがついてくる方法があったのでメモ。

■使用するjqueryライブラリー
jquery-1.2.6.min.js
jquery-ui.min.js
jquery.scrollfollow.js
http://kitchen.net-perspective.com/open-source/scroll-follow/

■実装サイト
http://shop.mogumogusearch.com/

無料ホームページ素材

SOURCE
■HTML
ヘッダー部分
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.scrollfollow.js"></script>

<div id="menu">コンテンツ</div>

■JAVASCRIPT
$(function ()
 {
  $('#menu').scrollFollow();
 }
);
参考サイト
スクロールしてもついてくる!のJavaScript「jQuery Scroll Follow」
http://www.skuare.net/2008/09/javascriptjquery_scroll_follow.html

WEB制作の定番書