Skip to content

Instantly share code, notes, and snippets.

@robertknight robertknight/README.md
Last active Sep 18, 2018

Embed
What would you like to do?
Bookmarklet to toggle visibility of fixed overlays on screen

This is a browser bookmarklet which hides annoying overlays on web pages that are positioned at fixed locations on the page and don't move as you scroll. This is particularly useful for smaller desktop screens (I have a 13" MacBook Pro). Examples include:

  • Cookie banners
  • Banners at the top and bottom of the page on Medium-powered blogs telling you to sign in
  • Navigation bars on web pages that don't scroll out of the way when you scroll down

Usage

  1. Create a new bookmark
  2. Copy the content of toggle-fixed-element.js
  3. Edit the bookmark and replace the URL with the copied content
  4. On any page which has annoying overlays, activate the bookmarklet to hide or show overlays
javascript:
var isFixedOverlay = element => getComputedStyle(element).position.startsWith('fixed');
var overlays = Array.from(document.querySelectorAll('*')).filter(isFixedOverlay);
overlays.forEach(el => el.style.visibility = el.style.visibility === 'hidden' ? 'visible' : 'hidden');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.