はじめに
はじめまして、@wa-cordと申します。
"Kill sticky headers"というブックマークレットをご存知でしょうか。Webサイト閲覧時、サイト上部に固定されているヘッダーなどを消してくれるものです。Alisdair McDiarmid氏が2013年に公開しました。
公式ページ：
https://alisdair.mcdiarmid.org/kill-sticky-headers/
私は愛用しています。非常に便利なものだと感じています。このブックマークレットのおかげでWebサイト閲覧が快適になりました。
Javascriptを学び、動作を理解することができたので、解説したいと思います。公式ページにも解説がありますが、初心者でも分かりやすいように丁寧に説明していきます。なお、Alisdair McDiarmid氏本人から紹介の許可を得ております。
使用方法
動作の解説の前に使用方法を説明します。簡単です。
- 公式ページの"Kill Sticky"という青いボタンを、ブックマークバーにドラッグ&ドロップする。（Google Chromeの場合）
- 追加されたブックマークレットをクリックする。
こうすると、公式ページの上部にあるヘッダーが消えます。ブックマークレットをクリックするだけで、他のWebページでも同様に動作します。消したヘッダーなどを元に戻したいときは、そのページをリロードします。
動作解説
ブックマークレットとは
ブックマークレットについて簡単に説明します。
ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。（Wikipediaより）
Wikipediaにある説明のとおりです。"Kill sticky headers"では、Javascriptで処理が記載されています。
"Kill sticky headers"の動作解説
"Kill sticky headers"のソースコードはこちらです。
1 (function () {
2 var i, elements = document.querySelectorAll('body *');
3
4 for (i = 0; i < elements.length; i++) {
5 if (getComputedStyle(elements[i]).position === 'fixed') {
6 elements[i].parentNode.removeChild(elements[i]);
7 }
8 }
9 })();
2行目で、elementsという変数を定義しています。querySelectorAllメソッドによって、HTMLファイルのbody要素の中にあるすべての要素を取得し、配列の形でelementsに代入しています。（作成者は、このquerySelectorAllをawesomeと表現しています。私も同意です。）
続いて、4行目から8行目にかけてです。すべてのelementsに対して、「Styleのpositionがfixed」となっているものに6行目の処理をさせています。6行目は、対象となったelments要素をremoveChildメソッドにより削除するという処理です。
おわりに
"Kill sticky headers"というBookmarkletを紹介し、その動作を解説しました。短いコードでこんなにも便利なものが作れるということに感動します。作成者のAlisdair McDiarmid氏を尊敬します。最後までお読みいただき、ありがとうございます。
謝辞
紹介を快諾していただいたAlisdair McDiarmid氏に感謝申し上げます。
参考
公式ページ：https://alisdair.mcdiarmid.org/kill-sticky-headers/
querySelectorAll：https://www.w3.org/TR/selectors-api/#examples
https://gigazine.net/news/20170629-kill-sticky-headers/