画面を上下にスクロールさせるときにメニューも一緒についてくるフローティングメニュー

画面を上下にスクロールさせるときにメニューも一緒についてくるフローティングメニュー(floating menu)

↑デモ

導入方法

jQueryとjquery.dimensions.jsをダウンロード

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>

読み込み・・・

<script type="text/javascript">
var name = "#floatMenu";//適用させるID
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

のように書くだけです。

html

<div id="floatMenu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
</ul>
</div>

フローティングメニューの位置は、cssで指定します。

<style>
#floatMenu {position:absolute;top:50px;right:50px;}
</style>

ちょっとカスタマイズ。。。
easingプラグインを入れてみた。（入れる必要ないと言われそうですが。。。）
ぴょんぴょん跳ねながらスクロールについてきます。
デモはこちら
easing.jsをダウンロードし読み込み

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>

<script type="text/javascript">
var name = "#floatMenu";//適用させるID
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{easing:'easeOutElastic',duration:500,queue:false});　//easingを設定
});
});
</script>

$(name).animate({top:offset},{easing:’easeOutElastic’,duration:500,queue:false});
のようにeasingを設定すると動きが変わります。

Google曰く、関連すると思われる広告