スクロール途中から位置が固定されるナビゲーションを作ってみる

Category : CSS, jQuery

ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか?
今回は jQuery を使ってそれを作ります。

Google アドセンスをこの方法で固定しようと思っている方へ。
プログラムポリシー違反の可能性が高いのでやめたほうがいいと思いますよ。

デモ 1

デモ 2

途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード

今回使う HTML はこんな感じです。

<div id="header">
  <h1>タイトル</h1>
</div>

<div id="container">
  <div id="main">左カラム(メインコンテンツ)</div>
  <div id="sidebar"><!-- サイドバー -->
    <div id="nav">ここを固定する</div>
  </div>
</div>

#main#sidebarfloat:left; しています。
これの #nav が表示エリア上部から 20px の位置まで来たら位置を固定したいと思います。

position:fixed; を使って固定する

デモ 1 をご覧ください。

ある程度スクロールしたら、#navfixed というクラス名をつけます。
CSS と JS は以下のようになります。

#sidebar {
  position: relative;
  float: left;
  width: 300px;
}

#nav {
  width: 300px;
  height: 300px;    /* デモ用 */
  background: #f88; /* 同上 */
}

.fixed {
  position: fixed;
  top: 20px;
}
var nav    = $('#nav'),
    offset = nav.offset();

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 20) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});

スクロールするたびに top の値を変更する

上記のコードですが、position:fixed; は IE6 が対応していません。
その替わりとして position:relative; を使い、スクロールするたびに top の値を変更して、位置を固定する方法を使ってみます。
デモ 2 をご覧ください。

CSS と JS は以下のようになります。

#sidebar {
  float: left;
  width: 300px;
}

#nav {
  position: relative;
  width: 300px;
  height: 300px;    /* デモ用 */
  background: #f88; /* 同上 */
}
var nav    = $('#nav'),
    offset = nav.offset();

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 20) {
    nav.css('top', $(window).scrollTop() - offset.top + 20);
  } else {
    nav.css('top', 0)
  }
});

こっちの欠点は動きがぎこちないというか、ガタガタ動いてしまうことです。
使うときは上手いこと分岐させて、IE6 だけこっちを使うとかすればいいんじゃないでしょうか。

Trackbacks & Pingbacks

Comments

匿名

ありがとうございました!初心者の私でもできました!
色々試したのですがこちらが一番分かりやすかったです。

匿名

大変参考になりました。
途中から消える場合の物を実装したい場合はどうしたら良いでしょうか?

Leave a Reply