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

サイト構築 -JavaScript

Post on:2009年12月1日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

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

Scroll/Follow Sidebar, Multiple Techniques
demo

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

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

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

CSS

<textarea name="code" class="css" cols="60" rows="5">
#page-wrap {
  width: 600px;
  margin: 15px auto;
  position: relative;
}

#sidebar {
  width: 190px;
  position: fixed;
  margin-left: 410px;
}
</textarea>

#page-wrap {

width: 600px;

margin: 15px auto;

position: relative;

}

#sidebar {

width: 190px;

position: fixed;

margin-left: 410px;

}

</textarea>

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

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
$(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
            });
        }
    });
});
</textarea>