追従するナビゲーション作ってみた

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

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

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

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

・・・

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

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

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

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

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

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

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

まとめ

猫可愛いです

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

Writer

chiba

ちば

北海道から上京してきました。
コーダー歴二年目入りましたヽ(゚∀。)ノ

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6303-9671

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。