[问题探讨]position: sticky;实现banner吸顶功能

最新推荐文章于 2024-01-01 14:36:58 发布

原创

最新推荐文章于 2024-01-01 14:36:58 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #sticky #banner #css

本文探讨如何通过CSS的position: sticky属性实现banner吸顶功能，避免JavaScript实现带来的复杂性和资源消耗。详细解析了sticky定位的工作原理，并提供了代码示例，指出该方法在IE浏览器的兼容性问题，但支持Edge等现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

实现banner吸顶功能，即nav，bannner，content上下三栏布局页面上，向上滚动过程中：
1，nav会消失逐渐；
2，banner会逐渐向上移动，直到贴到body顶部然后固定在body顶部；
3,content会向上走并逐渐被隐藏；

分析：

1，js+css实现：nav static定位， banner absolute定位(加top等于nav高度)， content static定位(加margin-top 等于banner高度)，依据body的scrollTop值动态调整banner absolute定位的top值；这样做，缺点是逻辑复杂，设备资源消耗大，以及页面容易抖动。
2，css实现：position: sticky;可以规避以上缺点；缺点是IE不兼容，不过亲测Edge是支持的，毕竟Edge已经拥抱Chromium了。

position: sticky说明–参阅MDN解释如下：

// 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

#one { position: sticky; top: 10px; }
// 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

// 粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。