追従要素
グローバルナビがついてくるアイツです。
元々あるパターンは…ないな。途中から出てくるのがベストですね!
追従ヘッダー
考え方
ひとまず今回はあるものに対して、クラスを入れ替えてする事にしました。
モノによっては、要素ごと入れ替えとか発生するのかなぁと思いますが
これをベースにすればさほど時間がかからずにいけるのではないでしょうかと思う所ですタイ
簡単な処理の流れ
- 通常クラス(固定)とfixedクラスの2つを用意する。
- ヘッダー部分の【高さ】【offset位置(top)】を取得し、それを合算
- scrollイベントを使用し、現在のスクロール位置を取得
- 1の値を超えた段階で、fixedクラスに変更
- 逆に1未満になった時も通常クラスに変更
htmlコード例
<div class="menuHBox mb20 pRelative"> <ul class="menu clearfix"> <li class="noMd"><a href="javascript:void(0);">ホーム</a></li> <li class="about"><a href="javascript:void(0);">about</a></li> <li class="product"><a href="javascript:void(0);">product</a></li> <li class="kankore"><a href="javascript:void(0);">kankore</a></li> <li class="goHome"><a href="javascript:void(0);">全日本<br />もう帰りたい協会</a></li> </ul> <div class="mdBox"> <div class="aboutBox"> ■<a href="javascript:void(0);">このサイトについて</a><br /> ■<a href="javascript:void(0);">言い訳のしようがない内容</a><br /> ■<a href="javascript:void(0);">謝罪する気はあるのか?</a><br /> </div> <div class="productBox"> ■<a href="javascript:void(0);">製品なんてないクセに!</a><br /> ■<a href="javascript:void(0);">やめないで!私の為にもっと争え!</a><br /> ■<a href="javascript:void(0);">先輩!これ飲んでください!(朝顔の種)</a><br /> ■<a href="javascript:void(0);">先輩!突きあってください!(フェンシング)</a><br /> ■<a href="javascript:void(0);">先輩!隙です!グサー(暗殺)</a><br /> </div> <div class="kankoreBox"> ■<a href="javascript:void(0);">趣味全開じゃいかんのか?</a><br /> ■<a href="javascript:void(0);">そう(趣味全開に)なればそう(こんなサイトに)なるやろ</a><br /> ■<a href="javascript:void(0);">まな板</a><br /> ■<a href="javascript:void(0);">なんでそんなんを、さい配のアレを言われなアカンのや! </a><br /> ■<a href="javascript:void(0);">自重しないって素敵な事だと思います。</a><br /> </div> <div class="goHomeBox"> ■<a href="javascript:void(0);">金曜日だからもう帰りたい</a><br /> ■<a href="javascript:void(0);">眠たいからもう帰りたい</a><br /> ■<a href="javascript:void(0);">月曜日だからもう帰りたい</a><br /> </div> </div> </div>
css例
.pFixed { position: fixed; top:10px; margin-left: 10px; } .pRelative { position: relative; margin: 0 auto; } .menuHBox { width: 700px; } /* 一部抜粋 */
js例
$(function(){ var gNaviOffsetTop = $('.menuHBox').offset().top, gNaviHeight = $('.menuHBox').height(), gNaviScrollTriggerPoint = parseInt(gNaviOffsetTop) + parseInt(gNaviHeight), addFlg = 0, menuHeght = $('.menuHBox').height(); $(window).scroll(function() { if($(window).scrollTop() >= gNaviOffsetTop) { // 追従 if(addFlg == 0) { $('.menuHBox').after('<div class="dummyBox"></div>'); $('.dummyBox').css('height',menuHeght+'px'); addFlg = 1; } else { if($('.dummyBox').css('display') == 'none') { $('.dummyBox').show(); } } $('.menuHBox').removeClass('pRelative').addClass('pFixed'); } else if($(window).scrollTop() <= gNaviScrollTriggerPoint) { // 固定 $('.dummyBox').hide(); $('.menuHBox').removeClass('pFixed').addClass('pRelative'); } }); });
今回はそれほど気にならないけど、ガコるので空要素を置いておくか出現させるかしたほうが
よいのかもしれないですね。