Riry Design Labo

主婦が自宅で稼ぐ方法を紹介!

メニュー

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

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

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

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

 

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

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

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

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

というお題です。

 

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

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

 

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


 

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

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

About The Author

りりちこ
りりちこです。福岡在住の主婦で、2児の母です♪

webデザインやネットビジネスでお小遣い稼ぎをしており、稼ぎたい方のサポートもしてます。
詳しいプロフィールはこちらから!
Follow :

Leave A Reply

*
*
* (公開されません)

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Google +
Pinterest
Pocket
Evernote
Feedly