Skip to content

Instantly share code, notes, and snippets.

@grassator
Last active May 29, 2020 18:37
Show Gist options
  • Save grassator/e76ec7775da5b1c14d125bc68e9a630d to your computer and use it in GitHub Desktop.
Save grassator/e76ec7775da5b1c14d125bc68e9a630d to your computer and use it in GitHub Desktop.
Add sticky section headers to html spec

1. Add the following URL to your bookmarks

javascript:(()%20%3D%3E%20%7B%20const%20style%20%3D%20document.createElement(%22style%22)%3B%20style.textContent%20%3D%20%22h5%20%7B%20position%3A%20sticky%3B%20top%3A%200%3B%20background%3A%20white%3B%20border-bottom%3A%201px%20solid%20%23eee%3B%20z-index%3A%20100%20%7D%20h6%20%7B%20position%3A%20sticky%3B%20top%3A%201.4em%3B%20background%3A%20white%3B%20border-bottom%3A%201px%20solid%20%23eee%3B%20z-index%3A%20101%20%7D%22%3B%20document.head.append(style)%3B%20%7D)()

To do that you can just bookmark current page and then change the bookmark URL to the javascript one above.

3. Click on the sticky headers bookmarklet you created

4. Enjoy sticky section headers!

@grassator
Copy link
Author

Capture

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment