WEB制作のメモ帳

2011-05-26

jquery

求人サイトや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