WEB系キャンパス

(K)シングルページ作成時のナビゲーション固定とページ内リンクの設定まとめ

single_page_top

シングルページ（1ページ完結型サイト）の案件をいただきました。

1ページでコンテンツを長〜〜く表示させて、1ページ内をJqueryのスムーズスクロールで動かすって事で、headerのナビゲーションメニューもページ内のどこでも最上部に固定させてるっていうタイプのページを作成したので、今回はその辺の最低限の設定を備忘録としてまとめておきます。

まずは、ページ途中にあるナビゲーションの固定

正式には「スティッキーヘッダー」と言うそうです。

header全部を固定するだけなら、CSSの「position:fixed;」で十分ですが、ページ途中にあるナビゲーションメニューのみを固定する場合はjQueryを使う必要があります。

【HTML】

<nav id="fixed_nav">
  <ul>
    <li><a href="#">ナビ01</a></li>
    <li><a href="#">ナビ02</a></li>
    <li><a href="#">ナビ03</a></li>
    <li><a href="#">ナビ04</a></li>
    <li><a href="#">ナビ05</a></li>
    <li><a href="#">ナビ06</a></li>
  </ul>
</nav>

ナビゲーション部分の全囲い（この場合は「nav」）にクラスかIDをつけておきます。

【CSS】

nav#fixed_nav{
  background-color: #fff;
  border-top:1px solid #7f7f7f;  
  border-bottom:1px solid #7f7f7f;  
}
nav#fixed_nav ul{
  width: 960px;
  margin: auto;
  overflow: hidden;
}
nav#fixed_nav ul li{
  width: 160px;
  text-align: center;
  float: left;
  border-right:1px solid #7f7f7f;
  padding:10px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;  
}
nav#fixed_nav ul li:first-child{
  border-left:1px solid #7f7f7f;
}

ナビゲーションの装飾用のCSSです。ここはお好みの装飾で。

jQueryで指定の場所を固定

まずは、本家jQueryを読み込むのを忘れずに・・・

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

んで、次にナビゲーションを固定させるためのコードを追加

【jQuery】

jQuery(function($) {
var nav    = $('#fixed_nav'),
    offset = nav.offset();

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

一定の場所までスクロールすると、「#fixed_nav」に「.fixed」を追加するような命令になるので、最後に、CSSに固定させるためのコードを書きます。コレがないと、固定されません。

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

「z-index:10000」は例えば、コンテンツ内にスライダーとかをつけた時とかにナビゲーションが一番上に来るように前後関係を最前面にするための記述になります。

で、できたサンプルがコレ

DEMO

ページ内リンクをスムーズスクロースさせる設定

シングルページは、コンテンツ内容が1ページ内に全て収まっているので、ページ遷都がなく別ページヘのリンクがありません。なので、jQueryを使ってページ内リンクをする〜〜っと、動くアニメーションを作成します。

【HTML】

<nav id="fixed_nav">
  <ul>
    <li><a href="#contents01" class="scroll">ナビ01</a></li>
    <li><a href="#contents02" class="scroll">ナビ02</a></li>
    <li><a href="#contents03" class="scroll">ナビ03</a></li>
    <li><a href="#contents04" class="scroll">ナビ04</a></li>
    <li><a href="#contents05" class="scroll">ナビ05</a></li>
    <li><a href="#contents06" class="scroll">ナビ06</a></li>
  </ul>
</nav>
          ・
          ・
          ・
<div id="contents01">
<h2>コンテンツその1</h2>
  <p>コンテンツ</p>
          ・
          ・
          ・
  <p>コンテンツ</p>
</div><!-- /#contents01 -->

aタグの最初の「＃」はアニメーションなしのページ内リンクの一般的な記述。
その後ろの「class=”scroll”」はスムーズスクロールさせるための記述。

【jQuery】

$(function() {
 $(".scroll").click(function(event){
  event.preventDefault();

  var url = this.href;

  var parts = url.split("#");
  var target = parts[1];

  var target_offset = $("#"+target).offset();
  var target_top = target_offset.top;

  $('html, body').animate({scrollTop:target_top}, 500);
  });
 });

「 $(‘html, body’).animate({scrollTop:target_top}, 500);」の最後の数字部分を変更するとスクロールのスピードを調整できます。

DEMO

しかし、これでは、固定されたナビゲーションの後ろに見出しが隠れてしまい、スクロールされたはいいけど、どこにいるかよくわからないし、見出しが見えないのでよろしくないですね。

ナビゲーション分の高さを調節するための記述を追加

まず、CSSで調整する場合

【CSS】

#contents06,
#contents05,
#contents04,
#contents03,
#contents02,
#contents01{
  margin-top: -50px;
  padding-top:50px;  
}

各コンテンツにネガティブマージンと相殺するためのpaddingを記述します。コツとしてはナビゲーションの高さのちょっと多めにするとゆとりのある状態でスクロールがストップします。

DEMO

ですが、コレではなぜか最初のクリックでは見出し部分が隠れたりと何やら挙動が不安定だったりします。なので、jQueryに直接調節用の命令をするやり方もあるようです。

【jQuery】

$(function () {
    var headerheight = 45; 
    $('a[href^=#]').click(function(){
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerheight; 
        $("html, body").animate({scrollTop:position}, 500, "swing");
        return false;
    });
});

んで、調節用のCSSは以下に変更します。

【CSS】

#contents06,
#contents05,
#contents04,
#contents03,
#contents02,
#contents01{
  padding-top:50px;  
}

さっきと同じようなネガティブマージンをつけると、何故か微妙に前のコンテンツがはみ出てくるので、「padding-top」のみで。コンテンツ内のコーディングの時点でその辺も見越して記述するとさして、問題はないかと・・・。

DEMO

まとめ

1ページ完結型のシングルページの場合、コンテンツ表示時にアニメーションを追加させるパララックス効果的なものも導入スべきトコですが、案件内容的にお硬い感じの企業サイトだったので、こんな感じで十分かと。実案件ではここからレスポンシブ対応とかさせたんですが、今回はこんな感じで。シングルページだけでなく、LPページにも使えるので、何かと使う手法ではあるかと思います。

どうでもいいですけど、シングルページで検索すると、Wordpressのシングルページ（single.php）ネタの記事も表示されるので、ちょっとめんどくさいデスね。今回は以上ですm(_ _)m

今回参考にさせて頂いたサイト

こちらの記事もあわせてどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です