[JS]スクロールに合わせてページ内のさまざまな要素を最適なポジション・スタイルで表示するスクリプト -Auto Fix Anything
Post on:2013年11月14日
sponsors
ヘッダやナビゲーション、サイドバーなど、ページ内のさまざまな要素をスクロールに合わせてポジションやスタイルを最適化するjQueryのプラグインを紹介します。
HTMLはほとんど手を加えないので、既存のサイトにも簡単に利用できると思います。
Auto Fix Anythingのデモ
デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。
スクロールしてみます。
コンテンツ内のイエローのヘッダと右のサイドバーに注目です。
スクロールすると、イエローのヘッダは上部に固定され、サイドバーも上部に固定されブラウザの高さを超える要素がある時はスクロールバーが表示されます。
ヘッダは高さ、サイドバーは背景カラーも変更されています。
複数の要素が可能なだけでなく、スクロールごとに対象となる要素を変更することも可能です。
さらに、スクロールしてみます。
これは二番目のヘッダとサイドバーで、スクロールすると一番目と同様に上部に貼りつきます。
Auto Fix Anythingの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。
<head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.autofix_anything.js"></script> <link href='autofix_anything.css' rel='stylesheet' type='text/css'> </head>
Step 2: HTML
サイドバーをスクロールに合わせてポジションを変更してみます。
特別な記述は必要無いので、既存のサイトにも簡単に利用できます。
<div class="wrapper"> .. <div class="sidebar">..</div> .. </div>
Step 3: CSS
ラッパーのスタイルに「position: relative;」を与えます。
.wrapper {
position: relative;
}
Step 4: JavaScript
jQueryのセレクタでサイドバーを指定し、スクリプトを実行します。
$(".sidebar").autofix_anything({
customOffset: false,
manual: false,
onlyInContainer: true
});
sponsors
