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

 

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

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

プラグインへ一言

スクロール スマホ

---