andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippet explanations

Browse Source
This commit is contained in:
Chalarangelo
2021-10-13 21:18:48 +03:00
parent ee00c20cc3
commit e31747599b
15 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/scroll-progress-bar.md
View File

@ -2,13 +2,13 @@
title: Scroll progress bar
tags: animation,visual,intermediate
firstSeen: 2021-05-24T09:42:03+03:00
lastUpdated: 2021-05-24T09:42:03+03:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Creates a progress bar indicating the scroll percentage of the page.
- Use `position: fixed` and a large `z-index` value to place the element at the top of the page and above any content.
- Use `EventTarget.addEventListener()` along with `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
- Use `EventTarget.addEventListener()` and `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
```html
<div id="scroll-progress"></div>