jQuery FAQs: Scroll To and Highlight

jQuery Plugin – Feature List

で、そんなときに「あなたのIE6/PNG頭痛の薬!」DD_belatedPNG.jsというのがあったので忘れないうちにメモ。

DD_belatedPNG

使い方

DD_belatedPNG.jsをダウンロード

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
  DD_belatedPNG.fix('.png'); //適用させる要素,id,class名
</script>

IE6以下にだけ読み込ませるように
jsファイルを読み込み、 DD_belatedPNGを適用させる要素、id、class名を書きます。
(‘.png’)と書くとclass=”png”のところが適用。複数書くときは”,”で区切る。(‘img,.png,#png’)みたいに。
htmlは、上のサンプルのように書けばIE6でも透過されていますし、jquery.pngFix.jsみたいに
リピート画像で悩まなくてすみました。

知られている問題

body,tr,td要素の背景には使えないです。まぁtr,tdに透過pngってあんまりないと思うが。。。
bodyの場合も<div id=”hoge”></div>みたいにdivでくくってしまえば問題ない。
input type=”image”とbackground-position: fixed;にも対応してないみたいです。

jQuery Plugin – Page Peel

導入方法

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を設定すると動きが変わります。

Smooth Animated Menu with jQuery

jQuery Dock Menu Tutorial Revisit – Dock at Bottom