Scroll_up_barプラグインのデモページ

【jQuery】上にスクロールすればトップメニューが表示されるScrollUpBarプラグイン

2014.10.15   1686


iPhoneのSafariブラウザは上にスッとスクロールするとアドレスボックスやメニューが表示されますよね?
そんなSafariのUIライクなトップメニュー表示をすることができるScrollUpBarプラグイン。
ニュッとメニューが出てくる動きは必見。


 

ScrollUpBarプラグインのオススメ/ポイント

  •   上にスクロールした時だけメニューが表示されるのでユーザーは画面を広く使える
  •   iPhoneのSafariブラウザライクなので慣れている人は取っ付き易い
  •   スマホにも対応

ScrollUpBarプラグインのデモ


ScrollUpBarプラグインのページ


ScrollUpBarプラグインの使い方

それではScrollUpBarプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<body>
    <div id="topbar">TOP BAR</div>
    <div id="document">
        <!-- ここにサイトコンテンツ -->
    </div>
</dody>

CSSコード

/* 自由に調整してください */
#topbar {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    }

#document {
    padding-top: 56px;
}

JavaScriptコード

<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../dist/scroll-up-bar.min.js"></script>
<script>
	$('#topbar').scrollupbar();
</script>

プラグインへ一言

スッと上にスクロール!するとニュッと出る。

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております