このサイトのヘッダーを解説してください

質問

まずはサイトのURLです。
http://hakkasanlv.com/
このサイトのヘッダーが画面をスクロールするとコンパクトサイズになって降りてくるのですが、
コードを見るとjavascriptとjqueryを用いてるみたい？なのですがいまいち解読できません。
わかりやすく解説いただけたらと思います。
htmlは苦手分野ですので優しくよろしくおねがいします・・・。

回答No.3

neko-ten

あ、IE6だとposition:fixedききません。
これはIE6がプアなわけですが・・・
対象サイト、Tridentによっては開かずに落ちるね・・・。
IE7以降の場合、互換モードによっては無効になります。

これらを対処したい場合は、やっぱりスクロールをトリガにして、スクロールされたらヘッダの位置を変えることになります。
スクロール位置はscrollTopで見れますので、これで得られる値をヘッダのtopに指定してやればいいわけです。
スムーズじゃないので嫌いですが。

回答No.2

neko-ten

サイトのっていうか、一般的な実践方法として。

配置固定だけなら、別にCSSでposition:fixedすればいいわけです。
小さくなるのは、scrollをトリガにして、スクロール値が0pxかそうでないかでCSS切り替えているだけでできます。
ここでanimate入れれば、コンパクトになる動作をアニメーションにできますので、それを使う人が多いです。

回答No.1

play_with_you

わざわざ「いまいち」と付けるって事は(見栄っ張りじゃなきゃ)少しは自力でわかったということですよね？
それなら、どこからどこまでは自分で分かったのか、どこからが理解が追いつかないのか、きちんと述べてください。

自分のサイトで使いたいんでしょうが、他人に丸投げしてあわよくばコードも書いてもらって自分はコピペだけで楽ができてヤッホーみたいな神経(違うといいたいでしょうが、違う人は「わかりやすく」「苦手分野ですので優しく」とは言いません)じゃ、仮に誰かが教えてあげて使えたとしても、後から「やっぱりここをこうしたいあそこをこうかえたいでも自分じゃ分からない」となって「苦手分野なので優しく分かりやすく教えてください」という言葉ばかりの丸投げを繰り返すのが明白です。

というかまあ、自力で何も学ぶ気が無いなら何もかも辞めてしまえと言いたいですけどね。

お礼

-どこからどこまでは自分で分かったのか、どこからが理解が追いつかないのか、きちんと述べてください。-

jqueryとjavascriptを用いている。

-他人に丸投げしてあわよくばコードも書いてもらって自分はコピペだけで楽ができてヤッホーみたいな神経-
車輪の再発明はしません。
わかる方がいたら教えてもらった方が理解に時間がかかりません。

play_with_you様は回答していないし、ほうっておいてくれたら良いのにと思います。