はじめに

はじめまして、@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/

"Kill sticky headers"の動作解説 ーWebサイト閲覧を快適にー