[JS]スクロールに合わせてページ内のさまざまな要素を最適なポジション・スタイルで表示するスクリプト -Auto Fix Anything

ヘッダやナビゲーション、サイドバーなど、ページ内のさまざまな要素をスクロールに合わせてポジションやスタイルを最適化するjQueryのプラグインを紹介します。

HTMLはほとんど手を加えないので、既存のサイトにも簡単に利用できると思います。

デモのキャプチャ

Auto Fix Anything -GitHub

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
});

top of page

©2017 coliss