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

2014.10.15   2258


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


 

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

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

ScrollUpBarプラグインのデモ


ScrollUpBarプラグインのページ


ScrollUpBarプラグインの使い方

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

HTMLコード


    
TOP BAR

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コード





プラグインへ一言

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

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

follow us in feedly

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