スクロールすると小さくなるヘッダーの作り方｜DESIGN REMARKS [デザインリマークス]
サイトにアクセスした最初の時点から、スクロールをするとサイズが小さくなるヘッダーってよくありますよね。最初は大きく見せたいけど、スクロールしてコンテンツを見始めたら小さくしたい、というものです。 使う機会の多い技術ですので、簡単な方法をまとめてみます。 HTML / CSS / JS で作っていきます。 仕様を決める 今回は、下記の仕様を想定して作っていきます。 ヘッダーの中にはロゴとナビゲーションの2つの要素がある。スクロール量が、ヘッダーの高さを超えると、小さくなる。スクロール量が、ヘッダーの高さを下回ると、元に戻る。 これを実現するために、ヘッダーの高さを基準に、スクロール量によって、それぞれの要素にclassを付けたり取ったりするスクリプトを書いていきます。 要素をJSで取得 JSで取得して操作したい要素は下記のものになります。 ヘッダー要素 <header id=”header”
![スクロールすると小さくなるヘッダーの作り方｜DESIGN REMARKS [デザインリマークス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4bd9883a323f0fc2616076c8f41647d17a30b4a9/height=288;version=1;width=512/https%3A%2F%2Fdesign-remarks.com%2Fwp-content%2Fuploads%2F2019%2F01%2Fscroll_header.jpg)
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
