Xeory Extensionをカスタマイズ!ナビゲーションメニューをスクロールすると上部に固定

かなりお久しぶりの記事です。

なかなか書く暇がないので、お客様から依頼されたもののだいぶ手こずったカスタマイズ記事でも書こうと思います。

 

この「庭PON」
のヘッダー部を見てください。

下にスクロールすると、上部に固定されちょっと縦幅が狭くなります。

ナビゲーションメニューを狭く
 

庭PONではXeory Extensionを使ってます。
ではXeory Extensionにこの効果をつけるにはどうしたらいいのか!!!

というお題です。

 

スクロールすると高さを狭くするという指定をcssでしたらいいわーと簡単に思ってたんですが

jqueryも絡ませないといけないことが分かり、格安で受けたことを後悔しました。
ちゃんとできるのだろうかと心配になりました。

 

参考にしたのはこのサイトです。めっちゃわかりやすかったです。
WEB PIXEL
「jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション」


 

この通りにやって、まぁスクロールしたら上部に固定はされたんだけど、どこかおかしい。
サイズが変わらないんです。

やり方としては、jqueryでスクロールすると#headerにfixedというクラス名をつけます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です