固定画像を動的に演出する

#fixedElement { position: fixed; top: 100px; left: 80px; background: url(image/sample.jpg) #000 no-repeat; /* IE5 later && javascript-on */ position: expression('absolute'); top: expression((documentElement.scrollTop || document.body.scrollTop) + 100 + 'px'); left: expression((documentElement.scrollLeft || document.body.scrollLeft) + 80 + 'px'); }ただ、これだけではIEで画像がスクロールの際にガタつくため、
body { background: url(null) fixed; }このように、body要素のbackground-attachmentプロパティを”fixed”にします。この例では画像などを一括で指定しています。なおbody要素に背景画像を設定し、なおかつ固定させたくないという場合、IE6限定での解決法があるようです。詳しくはこちら また前述の実験ページではスクロール量に応じて、エフェクトや効果音を出す仕組みにしています。スクロール量の判定はブラウザ間の互換を考えてPrototypeライブラリを利用しています。Elementクラス(元々はPositionクラス)のcumulativeScrollOffset()メソッドは、引数の要素の縦横スクロール量を配列として取得します。インデックスかtop、leftプロパティで参照可能です。
var element = $('element_ID'); var scrollTop = element.cumulativeScrollOffset().top;ページのスクロール量を常時監視するため、次のようにタイマーを用いて書くと実用的です。
var element, scrollTop; element = $('element_ID'); //Prototypeライブラリで要素を取得 //PeriodicalExecuterクラスはsetIntervalと同じタイマー機能を持つ new PeriodicalExecuter(function(pe) { //ここでは横方向のスクロールは扱わないので、topプロパティを代入します。 scrollTop = element.cumulativeScrollOffset().top; //スクロール量が1000px以上になったら、if文のなかの処理を実行。 if (scrollTop >= 1000) { ................. ................. ................. } //実際のスクロール量を確かめるため、FirefoxのFirebugを利用するのが手っ取り早いです。もちろんスクリプトが完成したらこの部分は削除します。 console.log(scrollTop); }, 0.1);一方で一定間隔で処理を繰り返すタイプのタイマーを使用していると、一度だけさせたい処理を何度も実行してしまうことがあります。このページでは一度だけ処理させたいとき次のように変数でチェックするようにしています。
var element, scrollTop; element = $('element_ID'); //すでにアラートされたかチェックする変数。初期値はfalse var isAlert = false; new PeriodicalExecuter(function(pe) { scrollTop = element.cumulativeScrollOffset().top; if (scrollTop >= 1000) { //縦方向のスクロール量が1000px以上になり、さらに変数isAlertがfalseならばif文の以下のコードを実行 if (!isAlert) { alert('HOGE!!'); //同じコードが再び実行されないように変数isAlertをtrueを代入する isAlert = true; } } }, 0.1);