[JS]jQueryでページスクロールしてもナビゲーションを固定させる方法
スポンサード
また、
以下に、スクロールにより要素を固定させるサンプルを用意しました。
スクロールによる要素の固定のデモ
スポンサード
この記事は OZPAの表4 様の記事を参考にさせていただきました。
ページを下までスクロールしてもサイドメニューに広告が固定されたまま、なんてブログをよく目にしますが、このような動きはjQuery を利用することで実装可能です。
バナー広告以外にもメニューボタンやSNSボタン、ページの先頭へ戻るなどのリンクを設置できるなど、色々と応用しやすいカスタマイズです。
Javascript のサンプル
jquery ファイルと一緒に、<head> 内に以下のjavascript のコードを記述します。<script src="./jquery.min.js"></script> <script> $(function($) { var tab = $('.nav'), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass('fixed'); } else { tab.removeClass('fixed'); } }); }); </script>
.nav
要素がスクロールによってページの先頭に来た時点で、fixed
のクラスを付与します。それ以外の時には fixed
のクラスは外しておく、という処理になります。CSS のサンプル
固定させたい要素に対してposition:fixed
を指定します。.nav.fixed { position:fixed; top:10px; }
top:10px
の値ですが、ページの上部からどの位置に要素を固定させるか?を指定します。また、
right:
や left:
など、要素の配置場所によってCSS の記述を調整します。以下に、スクロールにより要素を固定させるサンプルを用意しました。
スクロールによる要素の固定のデモ
スポンサード
コメント