waypoints.jsを使って特定の位置までスクロールしたらメニューバーをにゅるっと出す

waypoints.jsをダウンロード

こちらからダウンロード。
今回はファイルダウンロードよりjs/ディレクトリにあるjquery.waypoints.min.jsを読み込みます。

ヘッダーで読み込み

htmlの記述

・メニューバーのhtmlはこんな感じです

・ヘッダーを表示させる位置にclassを振ります。

jsの記述

スクロールされ.sticky_pointまできたらメニューバー.navbar-defaultに.stickyを追加し、
cssによってメニューバーを表示させたいので、以下のような記述になります。

cssの記述

最初.navbar-defaultをtransform: translateY(-100%)で見えないようにしておき、.navbar-default.stickyの時に0%にすることで、見えるようにします。
transitionを設定することで、にゅるっと出てくるようになります。

 
 
Twitter🌀🌀🌀🌀@_kohimoto_
Instagram🌀🌀@_kohimoto_

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA