|
- 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 main() {
- let active = false
- let revert
-
- function onScroll() {
- let action
- if (window.scrollY > 20 && !active) {
- active = true
- action = () => { revert = hideBanners() }
- } else if (window.scrollY <= 0 && active) {
- active = false
- action = () => {
- revert && revert()
- revert = undefined
- }
- }
- if (action) {
- window.requestAnimationFrame(action)
- }
- }
-
- window.addEventListener('scroll', onScroll)
- }
-
- main()
|