Xeory Extensionをカスタマイズする PART2

 

メニューバーを固定したい・・・!!

今回は、Xeory ExtensionのカスタマイズPART2です。
今回やりたいことは、このデモサイトのように、上のメニューバーが固定されるアニメーションをつけたい・・・!!!

ということで、今回もCSSをガンガンいじっていきます。

今回参考にしたサイトはこちらです。

 

メニューバーを固定するのは、jQuery

 

通常のXeory Extentionのメニューバーはこのようになっていて、下のほうにスクロールしてもメニューバーは動きます。固定されていません。
なのでまずは、ここにつけるjQueryをたしていきます。

jQueryがよくわからない方は、こちらに詳しく書いてありますので、参考にしてください。

 

 

 

このソースをheader.phpファイルの<head></head>部分につけ足します。
このソースが画面をスクロールしたときにfixedというクラスをつけ、一番上までスクロールされたときは、そのクラスを外すというソースです。fixedのクラスにCSSでスクロールしたときの動きを付け加えていきます。

 

CSSに編集を加えていく

 

基本的には、参考サイトのCSSをそのまま使います。
文字色がブラックだとちょっと面白みがないので、#888888に変更します。

 

 

ここですね。
ここで、文字色を変えます。

そうすると、スクロールすると文字色とヘッダー部分の背景色が変わるアニメーションが加わりました!

こちらから確認できます。

若干文字崩れしてしまっていたり、背景画像の設定がうまくいっていなかったり、各記事の画面でもスクロールしたらついてきてしまう、わかりずらい画面になっていたりするので、おいおい直していきますが、今回のミッション『メニューバーをヘッダーに固定したい!』というミッションはクリアできました。

次は、TOPにくる画像をいじったり、各記事の画面でスクロールしたときについてこないようにしたり、文字崩れの修正をしたりしていきます。

 

コメントを残す

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