jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
jQueryの.on()で使えるイベントの種類と記述例 | 1bit::memo
最近jQueryを使う時に.on()の使用頻度がとても高いです。.clickや.hoverなどの単体機能よりカスタマイズしやすいのが理由です。 で、.on()にはイベントが沢山ありますので、そのイベントをまとめておこうと思います。 SPONSORED LINK イベントとは？ .on()で使う実行の種類です。以下の★に入ります。 $(function(){ $('.element').on('★', function(){ //ここに★に対応した処理を記述 }); }); イベントの種類 上記コードの★部分に当たるイベントは、以下のようにたくさんあります。 blur 要素がフォーカスを失った時に発生 focus 要素がフォーカスを得た時に発生 load ドキュメント内の全リソースの読み込みが完了したときに発生 resize windowの大きさが変更された時に発生 scroll ドキュ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
