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

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

デモのキャプチャ

Scroll/Follow Sidebar, Multiple Techniques
demo

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

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

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

CSS

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

JavaScript

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

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

top of page

©2017 coliss