First implementation

src/content_script.js

@@ -1 +1,66 @@
 import browser from 'webextension-polyfill'
+
+function hideBanners() {
+  const revertSteps = []
+
+  /* Hide all elements with position:fixed */
+  const fixedElements = Array.from(document.querySelectorAll('*'))
+    .filter(el => getComputedStyle(el).position === 'fixed')
+
+  fixedElements.forEach(el => {
+    const originalDisplay = el.style.display
+    const originalOpacity = el.style.opacity
+    const originalTransition = el.style.transition
+    el.style.transition = 'opacity 1s'
+    el.style.opacity = '0'
+
+    const hiderTimeoutId = window.setTimeout(() => {
+      el.style.display = 'none'
+    }, 1000)
+
+    revertSteps.push(() => {
+      window.clearTimeout(hiderTimeoutId)
+      const reverterTimeoutId = window.setTimeout(() => {
+        el.style.transition = originalTransition
+      }, 1000)
+      el.style.display = originalDisplay
+      window.setTimeout(() => {
+        el.style.opacity = originalOpacity
+      })
+    })
+  })
+
+  /* Stop position:sticky elements from sticking. */
+  const stickyElements = Array.from(document.querySelectorAll('*'))
+    .filter(el => getComputedStyle(el).position === 'sticky')
+
+  stickyElements.forEach(el => {
+    const originalPosition = el.style.position
+    el.style.position = 'relative'
+    revertSteps.push(() => {
+      el.style.position = originalPosition
+    })
+  })
+
+  const revert = () => revertSteps.forEach(step => step())
+  return revert
+}
+
+
+function startCheckingLoop() {
+  let revert
+
+  function checkScroll() {
+    if (window.scrollY > 20 && !revert) {
+      revert = hideBanners()
+    } else if (window.scrollY <= 0 && revert) {
+      revert()
+      revert = undefined
+    }
+    window.requestAnimationFrame(checkScroll);
+  }
+
+  window.requestAnimationFrame(checkScroll);
+}
+
+startCheckingLoop();