[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar

Post on:2014年7月30日

ヘッダやナビゲーションなど、ページの上部に配置したパネル状のバーを下にスクロールした時には隠し、上にスクロールした時にそのバーを表示するjQueryのプラグインを紹介します。

デスクトップでコンテンツに集中させる効果だけでなく、スマホやタブレットなどの小さい画面でスペースを有効に利用することができます。

サイトのキャプチャ

ScrollUpBar -GitHub

ScrollUpBarのデモ

デモはChrome, Safari, Firefox, Opera, IEなどのデスクトップ用のブラウザをはじめ、タブレット、スマホでご覧ください。

デモのキャプチャ

デモページ

下にスクロールしてみます。

デモのキャプチャ

デモページ：下にスクロール

下にスクロールすると、上部のバーは通常通り上へ消えていきます。で、どの地点からでも上にスクロールすると上部のバーが表示されます。

デモのキャプチャ

デモページ：上にスクロール

スクロール時に表示させるバーはoffsetTopにも対応しており、最上部のヘッダは通常通りで、その下のバーだけ表示させることもできます。

デモのキャプチャ

デモ：offsetTop

このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。

ScrollUpBarの使い方

実装は非常に簡単で、既存のページでも簡単に加えることができると思います。

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

<body>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="scroll-up-bar.min.js"></script>
</body>

Step 2: HTML

スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、「position: absolute;」を加えます。

<div id="topbar" style="position: absolute; top: 0; left: 0; width: 100%; background: #ccc;">
  Top bar
</div>

「デモ：offsetTop」のようにバーの上にヘッダを配置する時は、下記のようになります。

<body>
  <div id="header">
    Header
  </div>
  <div id="topbar">Top bar with offset top</div>
  ...
  コンテンツ
</body>

Step 3: JavaScript

あとは、jQueryのセレクタでバーを指定し、スクリプトを実行するだけです。

<script>
  $('#topbar').scrollupbar();
</script>

sponsors

top of page

©2024 coliss