[CSS]画面をスクロールしたときにサイドバーの要素を追尾させる方法

Read More

jQueryを利用せずCSSのみを使って、画面をスクロールしたときにサイドバーの要素を画面に追尾させる方法。


と、その前に先にCSS単体で実装した場合の注意点を書いておく。

■注意点
・IE6はposition:fixedをサポートしていない
・IE7でposition:fixedの解釈が他と違うことがある
・追尾ブロックの大きさをきちんと指定する必要がある(つまりブロックサイズがアクセス毎に可変するようなものに対応できない)
・要素の下に回りこませる形で追尾ブロックを設置すると、ページスクロールさせてもそのスペースがずっと確保されたままとなる

上記のこれらはjavascriptと併用することである程度柔軟に対応することができる。が、問題が山のように残る。


一つ一つの問題を書くのも面倒(多すぎる)なので、とにかく頭に残しておく必要があるものは、
・position:fixedは常に使わないこと
・doctypeの宣言はきちんとしておくこと(当たり前)
・IEで困ったら.htcを調べてみる
だけ覚えておくこと。


まあ要するにposition:fixedは使うなってこった。存在を忘れなさい。


ただしサイトを利用するユーザの年齢層が絞られているのなら少し話が変わってくる。
例えばユーザの年齢層が「年寄り」も考えられる場合やはりIE6やIE7にも対応させる必要がある。
# なぜなら彼らはアップデートをしていないことがあるから

が、しかしユーザの年齢層が比較的若い層である場合その限りではない。

例えばニコニコ動画のランキングページ。
http://www.nicovideo.jp/ranking
# ログインしないと見れない?

このページにもスクロールに追尾してくるブロック要素がある。
しかしIE6でみた場合みごとに要素が崩れる。
# 要素が崩れているのはfloat:rightのせいなのだが


これなどは先ほどの例に当てはまるものだと思う。
このページ一つ見ても、レイアウト崩れ、スクロールのバグ、リンク表示のバグなどが確認できる。

つまりユーザの年齢層が若いから、IE6とかさすがに使ってる奴はいないだろうと考えた結果なのだろう。
IE6を一切切り捨てている。
# もちろんコーダーがただ単に何も考えていない可能性もあるが



IE6とIE7を含めるか否かで開発費は大きく変わる。
その辺はしっかりと見極める必要がありクライアントとの調整は必須である。



ちなみにposition:absoluteもできるだけ使うべきではない。
これはブラウザによってpxがズレることがあるため。
また文書構造を維持できないためSEOの観点からもよろしくない。




~実装~
さて、前置きが長くなったがCSSでの追尾の実装。


■stalking.html: サイドバー追尾(固定)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
<!--
#stalking {
  position: fixed;
  background:white;
  width:200px;
  height:100px;
  right:0;
}
-->
</style>
</head>
<body style="text-align:center;margin:0;padding:0;">
<div style="background:purple;">header</div>
<div style="float:left;width:200px;height:1200px;background:red;">left</div>
<div style="float:right;width:200px;height:1200px;background:yellow;">right<div id="stalking">stalking</div></div>
<div style="margin:0 200px;height:1200px;background:green;">center</div>
<div style="clear:both;background:blue;">footer</div>
</body>
</html>




■デモ
http://xirasaya.com/demo/6/stalking.html



まあ自分はこのCSSのみで書くスクロール追尾はまったく使うつもりがないのでここに書いたのはほんとにメモ程度の内容のものなんだけど。


あと、よくjQueryとposition:fixedを組み合わせて使ってるのをみる。
確かにこの場合CSS単体での実装とは違い、追尾するブロックのheightをCSSで固定させずともheightを動的に取得し埋め込みなおすことはできる。
# この方法でのheight指定はIE7対策としてはダメかも。試してない。
# 俺がCSSでブロックの高さを固定するのを嫌がる理由は将来的に追尾ブロック内に入れる要素の高さを変更する可能性は常に残るからデス(管理のしやすさ)

またそれでもIE6は(ほぼ)捨てることになる。
だってIE6の対策を入れようものなら手間(実装+動作確認+修正時の変更 + 可読性の低下 + 他への影響などなど)がひどいんだもの。
俺はそんなのごめんだわ。

もっともIE6を完全に切るのなら上記のjQuery+position:fixedのコンボは有効だと思う。
スクロール時チラつかないし。



ま、どっちにしろCSS単体でスクロールの追尾を実装させることは無いな。
■前回の記事:[jQuery]画面をスクロールしたときにサイドバーの要素を追尾させる方法
http://xirasaya.com/?m=detail&hid=362






--
そういえばposition:fixedってabsoluteと違ってrelativeの影響受けないんだねえ。
忘れてたというか使わないから知らなかったというか…



あーあと、ニコニコ動画のランキングページはFirefoxで見た場合とChromeで見た場合とでは動作に差異があった。
Chomeはページ下部までスクロールさせたらオートページャが働いて次のページを自動で読み込んでくれた。

Firefoxでオートページャをダメにしている理由を知りたい