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

Category : CSS, jQuery

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

デモ 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 と #sidebar は float:left; しています。
これの #nav が表示エリア上部から 20px の位置まで来たら位置を固定したいと思います。

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

デモ 1 をご覧ください。

ある程度スクロールしたら、#nav に fixed というクラス名をつけます。
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

Leave a Reply