MENU
CLOSE
DESIGNSTUDYWEBSITE Edit : 2018.11.29 Update : 2023.02.01

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を設定することで、にゅるっと出てくるようになります。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。