クロスブラウザ対応、スクロールに追従するパネルの3つの実装方法

JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。

Scroll/Follow Sidebar, Multiple Techniques
demo

チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。

サイドバーのリストをクリックすると、追従のパターンを変更できます。

実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。

CSS

#page-wrap {
  width: 600px;
  margin: 15px auto;
  position: relative;
}

#sidebar {
  width: 190px;
  position: fixed;
  margin-left: 410px;
}

アニメーション版の実装はjquery.jsを外部ファイルで指定し、下記のスクリプトを追加します。

JavaScript

$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            $("#sidebar").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        }
    });
});

チュートリアルでは他にも、CSSで実装する少しづつ隠されているエレメントが表示される版などがあります。

対応ブラウザは全てのモダンブラウザをはじめIE6/7にも対応しており、IE用には条件付コメントが使用されています。

Post on:2009年12月1日