スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました
2014年01月15日
こちらのブログで公開されていたものがステキでした。
スクロールで隠れるナビゲーションメニューhidenavi.jsをjQueryで作りました | Kana-Lier カナリエ
こういった隠す系の動きをやりたい事って結構多いですよね。
なのでいつもな感じでjQUeryにしてみました。勝手にやっちゃってすみません。
※ 画像とか勝手にこちらのサーバに置かせてもらってます。後日ちゃんと自分のものに変えますね、すみませんすみません。
※ ごめんなさいあとで自分の作ったページで公開しますね。とりあえず今デモは削除してます。
ファイルはこちら
使い方
これで動きますよー
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.hidenavi.js"></script>
<script>
$(function(){
$("#nav").hidenavi();
});
</script>
オプション
今のところ元スクリプトにあった変更箇所は変えられるようにしてます。
- scrollPosition : どれくらいスクロールしたら隠すか
- navTopPosition : どの高さに置いておくか
- navHover : 隠した際のナビゲーション要素
こういったインターフェイスは色々とストックしておけると色々助かりますよね。
KanaLierさんありがとうございます
他にこんな事も書いてます
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- Dashすげー便利
- jQueryのwidth,height系メソッドの違いについて
- Grunt+ST2な人がプロジェクトをチャチャっと開始する方法
- ローカルマシンにNode.jsをインストール
- jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応
- AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ
- PHPのvar_dumpをChromeのconsole.logとして出力する
- SASSでsourcemapを使う時のメモ
- スペースキーでスクロールする人のためのjQueryプラグイン作った
FBでコメント