TEORICO

【jQuery】スクロールしたらついてくるナビゲーション

【jQuery】スクロールしたらついてくるナビゲーション

一定量スクロールしたらついてくるナビゲーション

一定量スクロールしたら設置しているグローバルナビがついてくるようにする方法です。

JavaScript版はこちらから

最初から

position:fixed;

にしておけば間違いなくついてくるのですが、ヘッダーがあって、メインビジュアルがあって、ナビゲーションがある場合は最初からfixedにしておくと少し問題があります。

やり方としても、クラス名を付け外しする方法と、jQueryでCSSを変更を加える方法があります。

今回はjQueryでCSSを変更する方法です。

注意点も含めサンプルを置いておきます。

実際に適用しているサンプルはこちらから

 

HTMLとjQuery

サンプルで使用しているHTML

 

headerがあり、その中にグローバルナビゲーションがあります。

このブログサイトのheader部分です。

そしてメインコンテンツ部分である、mainがあります。

最後にfooterといういたってシンプルなHTMLです。

CSSに関してですが、特別なことはしていないので割愛します。

検証ツール(デベロッパーツール)などで確認していただいても構いません。

サンプルで.main__wrapperに対して、heightをつけているのはスクロールさせたいのでわざとです。

 

次にjQueryです

 

基本的にはコメントで書いている通りです。

$(window).scrollでスクロールした時をきっかけとしてjQueryを動作させることができます。

重要な部分として、

outerHeightメソッドを使用している点

outerHeight(true)とします。outerHeight()ではなく、必ず引数にtrueを追加してください。

そうすることでheightだけでなく、marginやpadding,borderやbox-shadowまでも含んだ高さを取得できます。

fixedするとabsoluteと同じで指定した部分が浮くような状態になるので、その分高さを失ってしまいます。

ですので、メイン部分にmargin-topを高さと同じpx数つけてあげることでガタつきを防ぎます。

これがないと、ガタガタしてメインコンテンツの最初の部分が少し見えなくなりますので注意してください。

jQueryでCSSを変更する方法ですが、次のように記述します。

もし複数一気に変更したい場合は

カッコの中に波カッコを追記し、区切りがカンマではなくコロンになります。

そして、カンマで区切ります。

これで完成です。

 

まとめ

今回書いたソースはCSSを変更するやり方ですが、この変更しているCSSをクラスで作っておいてあげればaddClassとremoveClassでクラスの付け外しを行いfixedさせるということも可能です。

注意点を追記しておきます。(2017/11/01追記)

bxSliderなどのプラグインを使用すると、きちんとした高さが取れないことがあります。

その際は$(function()内ではなく、$(window).on(‘load’,function()でoffsetを取得する、またはsetIntervalやsettimeoutなどを利用することで上手に取れます。

ただし、どちらのメソッドも繰り返し処理を行うので負荷をかけてしまいます。

clearIntervalやclearTimeoutを使用して1度だけなどにしておくと良いかもしれません。

 

今回使ったメソッド