スクロールに合わせてついてくるやつ
最近Miitomoを始めて絶賛フレンド募集中の私です。こんにちは。
先日作ったサイトの中で手こずった部分についてとりあえずメモります。
画面スクロールに合わせて要素がついてくる
ランディングページ作ってて、ちょっとおしゃれにしようと思ってヘッダーの一部分だけナビゲーションにして、この部分だけついて来させるようにしたかったのですよ。
そしたらこれめっちゃ苦戦しました。完全に理解不足でしたね。
この赤い部分ですね。これがスクロールに合わせてついてくるんですよ。
↓
こんな感じ。した。
最初からヘッダーをナビゲーションのみにしていれば簡単だったのにね。
中身としては次のような感じ。
・html
<nav id="nav">
<ul>
<li class="nav-list">なまえ</li>
<li class="nav-list"><a href="#header">TOP</a></li>
<li class="nav-list"><a href="#about">ABOUT ME</a></li>
<li class="nav-list"><a href="#reason">REASON</a></li>
<li class="nav-list"><a href="#history">HISTORY</a></li>
<li class="nav-list"><a href="#work">WORK</a></li>
<li class="nav-list"><a href="#conclusion">CONCLUSION</a></li>
</ul>
</nav>
・JavaScript
jQuery(function($){
var nav = $("#nav");
if(nav.length){ //そもそもnavが存在しているかの確認
var navTop = nav.offset().top; // navのページ上からの距離を取得
$(function() {
$(document).on('scroll', function() {
if ($(this).scrollTop() >= navTop) {
nav.addClass('follow');
} else {
nav.removeClass('follow');
}
});
});
};
});
まずhtmlの方だけど、list作って横並びにするのにfloatじゃなくてdisplay: table;を使った。だから<li>の中にも細かくclass付けたのよ。でももしかしたらclass無くても動くのかもしれない。私がやったときは動かなかったけど、何かしらミスってたからかも。もう少しちゃんと調べるか。
--------【追記】---------
ここでaddclassでfollowってクラスを追加してて、その中でposition: fixed;と top: 0; してるので結果的に画面上部にナビのバーがついてくるようになってるんだぜ。
----------------------------
んで、JavaScriptの方だけど、わざわざ中で$を定義してるのは他のライブラリとコンフリクトしないためにってことでこう書いたんだけど、必要あったのかな。bxsliderとかも使おうとして、最初動かなかったんだよね。それで、あーこれが噂のコンフリクトか、と思って上記みたいに書き直したんだけどやっぱり動かない。で、よく見たら大文字小文字の間違いを発見。それを直してようやく動いたとさ。
こういう順序で書き直したもんだから、実際にコンフリクトが起きてたのか、単なるミスタイプのせいなのかわからんという。今度やる気が出たら確認するとする。でもいい勉強になったかな。
あ、ちなみにコンフリクトを避けるためにはまず
jQuery.noConflict();
この一行が必要みたいです。
ページ内リンク先にスクロールっぽく飛ぶ
今回作ったのが自己紹介のランディングページだったのだけど、文が多すぎて一つのセクションが長くなってしまったのよ。で、そういうページにおいてナビゲーションのリンクをクリックしてページ内リンク先にポンと飛んじゃうと、全体のどの部分にいるのかを把握しづらいみたいな問題があるらしい。なので、リンクをクリックすると、シュルシュルとページをスクロールしていったみたいに見えるようにしたぞ。以下ソース。
jQuery(function($) {
var headerHight = 60; //ヘッダの高さ
$('a[href^=#]').click(function(){
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
$("html, body").animate({scrollTop:position}, 550, "swing");
return false;
});
});
ヘッダ（って書いてあるけどナビゲーションのことさ）の高さを入力してるのは、ヘッダがリンク先のセクションの頭にかぶらないようにするためだね。こうすると、ヘッダの下がぴったりセクションの切り替わり部分にくっつくのだ。めんどいから画像貼ってないけど、あとで読み返して自分がわかるのか不安。
まあそんなこんなで、やっつけっぽく作ったわけだけど、本当にわからないことしかない。すごいカッコいいサイトとかのソース見ても謎技術すぎてさっぱりわからん。でも実際に作ってみると色々とわかってくる部分もあってすごい勉強になる（小並感）。
とりあえずはつくったりしながらいろいろ覚えていく予定。やっぱフロントエンドはやってて楽しいですわ。
途中からですますがめんどくさくなったのはひみつ。
