Simplicityを少し改造してみた 番外編 part12 jQueryとCSSだけでタイトル回りを固定する

jQueryとCSSだけでタイトル回りを固定するって、それ以外にどんな方法があると言うんだと言う意見はグッと胸にしまって置いてください(笑)

いやそうじゃないんです、もちろん使うのはjQueryとCSSなんですが、PHPには何も変更を加えないというのがミソです。PHPに何も変更を加えないのに、グローバルメニューとか、検索フォームもタイトル部分に移動させます。しかもレスポンシブです。

と、ここまで書いておきながら、実はまだ完全というわけではないんです。というより、一応動作はするんですけど、もう少し洗練された方法みたいのがあると思うんです。ひとまずはそのポジションまでの布石ということで。

どういうものかを理解していただくために、今回もCodepenにサンプルを作ってみました。footerは面倒だったのでサンプルに組み込んでませんけども、まぁだいたい元のHTMLのまんまかと思います。おそらく(笑)

See the Pen WordPressTheme Simplicity title position fixed by Hidekichi (@Hidekichi) on CodePen.

タイトルのアニメーション、そしていきなり見た目が変わっていますが、元々のSimplicityの状態をjQueryとcssだけでこのようにしています。
cssの部分は、scssを利用して、この前の投稿で書いたメディアクエリなどのmixinも流用しています。もしこの未完成ながらサンプルを一度試したいと言う方は、scss(css)にあるCompiledを押してcssにしたものを利用してください。
前の投稿は、以下のブログカード

SASS(SCSS)を利用する メディアクエリのアイデア
いやぁ、しかしこのメディアクエリというのは本当に難しいものです。どれが正解かはイマイチわかりませんし、かといって何もしないわけにも行きません...

どのようにして最初の画面を作っているか

これ実はそんなにスゴイことをしているわけではありません。

こういう感じの処理をしておりまして、まず、#h-topの先頭に.newHeaderと言うブロックを作っておきます。
var moveSelectorの中にあるセレクタを.newHeaderに移動させ、かつサイトタイトルとディスクリプションを.title-wrapperで囲みます。で、#searchsubmitに「検索」と言う値を持たせて、これらをcssでデザインします。

タイトル部分を固定するのは、スクロールの位置が#mainに達したら固定するようにしています。タイトル部分を固定した段階で、#navi-inの中にあるグローバルメニューの部分である.menuを最初に作っておいた.newHeaderに移動させます。

これらはいわゆる下準備で、実際の動作としては、

このあたりが行っています。特に、

ここが動作の肝です。スクロールの位置が、headerPositionの位置を超えたら#h-topにcssの.fixedを付け加えます。なので本来は凄く簡単に、position:fixedでtop,leftが0のスタイルを付けたり外したりで、実現できるんですけれども、タイトルの部分を動かしたりでよけまえな処理が色々書かれていたりします。
その一つが、ヘッダが固定されたら、#navi-inに入ってる.menu(グローバルメニューの部分)をタイトル下に持っていくなどそういう細かな部分です。

また実は、現在研究中で、もっとうまく簡潔にできそうな部分ではあるのですが、1度だけアニメーションさせると言う部分の処理がゴチャゴチャと書かれています。

titleAnimationShow()と言う関数で、タイトルを動かしているわけですが、これも実際の構造は簡単な処理です。予め、左に200pxほど振っておいて、#h-topに.fixedがついた時に、右に200px動かす.moveRightが付くと言うものなんですが、スクロール処理の中にそのクラスを付けたり取ったりの処理が書いてあるので、スクロールの度毎にタイトルが動きます。それではアレなので、1度だけ動作するように、スクロールの処理の前に、flag = falseを書いておき、もし(!flag)の時、つまりtrueでは無い時(!は否定。trueの否定なのでfalseが真になります)に既に.moveRightがあったら消し、新たにアニメーションさせて、flagをtrueに設定すると、次のスクロールが始まった時にはflagがtrueになっているので、.moveRightを消すということが行われません。

その動作中に、スクロールがトップに戻ると、.moveRightを消しflagをfalseにするので、最初の状態つまりはタイトル等が左へ200px振られて見えない状態になるという感じです。

問題点としては、titleAnimationShow()の中身で、delayが設定してあるんですけれども、queue()の関係か、あるいはdelayの関係かで、タイトルが表示され遅れてディスクリプションが表示すると言うのが同時ぐらいに発動したりすることがあったりするわけです。
ここらは、何かしらもっと良いアイデアがあると思うので、調査続行したい所です。

スポンサーリンク

シェアする

フォローする