📐 视觉验证区域

当您缩放页面时 (放大或缩小)，顶部栏依然吸附在浏览器窗口最顶端，底部栏依然吸附在最底端。您可以滚动页面，查看顶部栏下方内容及底部栏上方内容的间距，所有内容清晰可读。

✨ 技术实现： 动态 JavaScript 监听 resize 与 load 事件，实时获取顶部栏 (topBar) 和底部栏 (bottomBar) 的高度，并动态设置 body 的 padding-top 和 padding-bottom，保证内容区域永远不会被固定栏遮挡。并且无论窗口缩放、旋转、字体大小变化，都能自适应调整。

📜 滚动演示区域 (内容足够长)

以下是一些示例文字，您可以滚动鼠标滚轮，感受底栏和顶栏始终固定在上下边缘，且内容滚动时不会被它们遮盖。且当窗口缩放比例改变时，固定栏位置依然稳固。

🔹 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, veritatis commodi autem itaque laboriosam consequuntur tempore deserunt atque vero iusto cupiditate voluptates. Earum, vero provident. Dolore a voluptates distinctio ex!

🔹 第二段：缩放页面时，注意顶部栏文字大小可能会有变化，但栏本身的位置依旧在页面的最顶部边缘。底部的栏也在最底部边缘。这是固定定位的特性。

🔹 第三段：我们在底部栏还添加了实时窗口尺寸参考，缩放时可见数值变化，但栏依然在固定位置。

🔹 第四段：为了进一步验证，可尝试在手机或浏览器开发者模式中缩放（双指缩放或Ctrl滚轮），均保持位置不变。

📌 更多例子： 无论页面的滚动条在什么位置，顶部栏不会随滚动消失，底部栏也不会随滚动移动。固定栏始终保持相对于视口的位置。

⭐ 第六点：如果内容高度很少（例如不足一屏），底部栏仍然固定在视口下方，不会跟着内容浮动，这符合预期。当我们填充足够多内容，滚动时底部栏也不会覆盖最后的内容，因为动态padding保证了安全的底部空间。

🎯 交互测试卡片

下面的进度条仅用来模拟内容区与栏的间距体验。

✔️ 缩放页面时 (Cmd/Ctrl + +/-) ，顶部栏和底部栏位置依旧不变，并且通过实时计算padding，防止内容错位。您可以尝试多次缩放，两个“bar”永远钉在页面顶部和底部，满足需求。

📢 另外，还使用 backdrop-filter: blur 增加毛玻璃效果，视觉上更有层次感。

📖 长文本块 (滚动查看底栏)

当页面滚动到底部时，底部栏的上方会出现足够的空白区域（padding-bottom动态适配），确保底部内容不被遮挡。以下是一些额外的占位内容，方便演示滚动效果：

• ✓ 第一项：固定定位 + 动态填充，完美解决内容遮挡。
• ✓ 第二项：实时监听窗口大小变化（缩放会触发resize），自动修正。
• ✓ 第三项：支持移动端缩放/旋转，同样保证bar位置稳定。
• ✓ 第四项：轻量级无依赖原生JS，性能良好。
• ✓ 第五项：两个bar均带有响应式设计，窄屏时自动调整文字间距。

✨ 缩放页面时，请注意顶部栏和底部栏的背景会一直横跨整个视口宽度，左右边缘贴紧。同时请观察内容区与顶栏、底栏之间的间距始终恰当，没有任何文字被遮挡。您可以打开浏览器开发者工具，模拟各种设备，或者直接缩放比例进行测试。

🔧 自适应机制说明

JS会监听页面加载、窗口大小改变 (包括缩放)、以及任何导致栏高度变化的场景。由于栏内文字换行或缩放引发字体大小变化，高度会重新计算并更新body的padding值。这是确保不论页面放大缩小都在同一位置的核心补丁。实现无闪烁，体验流畅。

🎯 结论：两个bar始终紧贴窗口上下边界。如果缩放至400%以上，文字可能会非常大，但栏仍然固定在顶部底部边缘，并且自动调整内边距，内容区域依然可滚动阅读。