The current article

ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery

タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。
ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素(タグ)で固定したい場合に使ってみてはいかがでしょうか。

capture

今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。
応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。

まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。
(今回はグローバルナビで説明)

HTML記述例(HEAD部)

<html>
  <head>
  ・
  ・
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
 
var nav    = $('#fixedBox'),
    offset = nav.offset();
 
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});
 
});
</script>
  ・
  ・
  </head>
  <body>
  ・
  ・

簡単な説明です。
10行目、fixedBoxというIDがある要素が
14行目、トップの位置に来た時
15行目、fixedというクラスを付与
17行目、トップの位置でなくなればfixedというクラスを削除
となります。
10行目は、お好きなIDに変更可能ですが、その場合は下記のID名も同じにして下さい。

続いてBODY部

  ・
  ・
<div id="fixedBox" class="nav">
  <ul>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
  </ul>
</div>
  ・
  ・

ナビの作り方については割愛させていただきます。
3行目のように、固定したい要素に「id=”fixedBox”」を付けて下さい。
すでに作成しておられる方は、既存の要素部分に「id=”fixedBox”」を記述してあげて下さい。

そしてもう一点、CSS部の記述です。スタイルシートに記述して下さい。

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

固定するためのCSSですのでお忘れなく。

以上で、スクロールした時、要素がトップの位置に来た時に固定されるようになりました。
必要に応じて、サイドバーなどで試してみてはいかがでしょうか。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。