28.滚动进度条 & 带文字叠加的图像

主要观点总结

文章介绍如何创建一个交互式滚动进度条，该进度条能够指示用户在页面中的位置，通过滚动百分比动态改变进度条的宽度。

关键观点总结

关键观点1: HTML结构

使用一个div元素作为进度条，初始时它没有宽度。

关键观点2: CSS样式

进度条样式包括固定位置、顶部为0、初始宽度为0%、高度、背景颜色和z-index值。z-index值较高，以确保进度条显示在内容之上。

关键观点3: JavaScript逻辑

使用JavaScript监听滚动事件，并根据滚动位置计算滚动百分比，然后将其应用于进度条的宽度。计算过程涉及获取文档的总高度和可视区域的高度，以及当前滚动的距离。