追従するナビゲーション作ってみた｜Blog｜株式会社トライム

こんにちわこんばんわ、ちばです。

最近暇さえあれば猫の動画や画像を見て癒やされています。

猫タイムがないとモチベーションが維持できないレベルです。

そんな私は猫アレルギーです。

・・・

さて、今回はスクロールした時に追従するナビゲーションを作りましたので紹介します。

jqueryのscrollで簡単実装٩( ᐛ)و

まずはデモをご覧ください。
ポイントは猫が可愛いところです。

作りとしてはまずoffset変数に対してnavの位置を教えてあげてます。

次にscroll時にウィンドウのてっぺんにnavが来たらfixedってクラスをつけるよ、そうじゃないときはfixedを消すよ٩( ᐛ)و
とif文で条件分岐してあげてます。

あとはfixedがついた時にpositionで固定するようにCSSを書いてあげれば出来上がりですね。

これは割りと使い所があるのですが、私自身jqueryをよく分かっていなかった頃はすごい悩んでいたので、
jquery苦手だ！って方の参考になれば幸いです。

まとめ

猫可愛いです

猫アレルギーでも猫を飼える方法があれば是非教えてください。