jQueryコピペ一発でスクロールアウト後も要素を追従させるIE6対応

最近よく見るアドセンスなどの広告がスクロールについてくる機能を、CSSの追加なしjQueryのみで行います。

文字で説明すると分かりにくいですね、百聞は一見にしかず、当ブログのメニュー最下部に実装されてます。 長いページでないと確認できないのでトップページなどで確認してみて下さい。

本来なら空白が表示され続ける場所ですが、広告やソーシャルブックマークボタンなどに有効利用できます。対象はclass指定するだけなので、どんな場所でも固定できますが、性質的に使えるのはメニュー最下部に限られる気もします。

スポンサーリンク

スクリプトの説明

まずはIE6非対応のシンプルバージョン。IE6では通常通り表示され追従しないだけなので、こちらでも実用に耐えると思います。add/removeClassでトグルする方法でもいいのですが、cssを別に定義しない分だけコチラが楽です。(・∀・)

<script type="text/javascript">
jQuery(function($){
 var ftPos = 40;
 var ft = $('.fixed_target');
 var ftTop = ft.offset().top;
 $(window).scroll(function () {
  if( $(window).scrollTop() > ftTop - ftPos) {
   ft.css('position','fixed');
   ft.css('top',ftPos+'px');
  } else {
   ft.css('position','static');
  }
 });
});
</script>

使い方

固定させたい要素に fixed_targetクラスを指定し、ftPos = 40で先頭から固定させる位置を設定します。この例では40pxです。

固定させたい要素がftPosに達したら、cssの position:fixed でその場に固定させます。ワードプレスなど既にjQueryがロードされている環境ならば、上のソースをコピペして fixed_targetクラスを指定するだけで導入完了です。

IE6対応バージョン

IE6は position:fixed が使えないので、スクロールが終わる度に要素を固定位置に再配置する必要があります。そのため残念ながらガクガクした表示です。IE6以外は上のスクリプトと同じく position:fixed で固定されます。

<script type="text/javascript">
jQuery(function($){
 var ftPos = 40;
 var ft = $('.fixed_target');
 var ftTop = ft.offset().top;
 $(window).scroll(function () {
  if( $(window).scrollTop() > ftTop - ftPos) {
   if( $.browser.msie && $.browser.version < 7 ){
    ft.css('position','relative');
    ft.css('top', $(window).scrollTop() - ftTop+ftPos);
   } else {
    ft.css('position','fixed');
    ft.css('top',ftPos+'px');
   }
  } else {
   if( $.browser.msie && $.browser.version < 7 ){
    ft.css('top',0);
   } else {
    ft.css('position','static');
   }
  }
 });
});
</script>

実は、IE6のブラウザ判定をjQuery非推薦の方法で行なっています。

現在は jQuery.support を用いたブラウザ判定が推薦されていますが、利便性を優先して

$.browser.msie && $.browser.version < 7[/code]を採用しました。今のところ、どのバージョンのjQueryでも問題ないと思います。なので今後、最新のjQueryを導入した際にIE6判別ができない状況が発生する可能性があります。

 

 

スポンサーリンク