jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
jQueryでスクロール量に応じて拡大するヒーローイメージ
jQueryでスクロール量に応じて拡大するヒーローイメージ 最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。 ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。 投稿日2016年12月28日 更新日2016年12月28日 HTML 画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。 fixedで固定表示するので他の要素とは別にしておきます。 HTML <div class="scale-bg"></div> <h1>Title</h1> <div class="contents"> ・・・ </div> CSS scale-bg に fixed、contents に relative を指定して位置を調節します。 CSS .scale-bg { backgr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
