スクロールに合わせてヘッダーを変化させる - JavaScriptテックラボ - [SMART]

概要 ヘッダを上部に固定しつつ、スクロールに合わせて拡大・縮小させる方法を紹介します。 デモ ダウンロード ※ファイルの場所は上記サイトの resize-header-on-scroll フォルダです。 HTMLマークアップはヘッダー部のHEADER要素とH1要素、コンテンツ部のMAIN要素のみです。 HTML <header> <h1 id="site-logo">smart</h1> </header> <main id="main"> </main> スクロールの位置によるヘッダーの拡大・縮小の仕掛けは簡単で、スクロール位置によってHEADER要素に拡大・縮小用のクラスを追加・削除します。 あとはCSSのアニメーションをHEADER要素に付けてあげるだけです。 スクロール位置の取得は scrollTop() を使います。 $(window).scrollTop() CSSはHEADE

[sub_low]

“left: 0;z-index: 100;background-color: black;text-align: center;”

[subeniya]

“.smaller”

[takaken1123]

[2016-09-01 1:40]