如何使用 JavaScript 改善 CSS sticky 效果？

使用 javascript 实现 css sticky 效果

css sticky 效果允许元素在超出视口高度时固定在视口顶部或底部。但是，如果元素高度大于视口高度，它在滚动过程中不会跟随滚动条移动，直到完全隐藏。

css 解决方案

以给定的 html 代码为例，该代码中右侧面板使用了 css sticky 效果。要实现所需的效果，我们需要使用 javascript 来强制元素跟随滚动条移动。

javascript 解决方案

我们可以使用 stickyfill.js 库来实现这一效果。该库提供了一个 polyfill，它可以在不支持 css sticky 的浏览器中模拟 sticky 效果。

以下是修改后的代码：

html

<script src="https://unpkg.com/stickyfilljs@2.1.0/dist/stickyfill.js"></script>
<div class="container">
    <div class="l">...</div>
    <div>
        <div class="r">...</div>
    </div>
</div>

javascript

Stickyfill.forceSticky(); // 强制开启 polyfill
Stickyfill.addOne(document.querySelector('.r')); // 添加到要应用 sticky 效果的元素

通过强制开启stickyfill，即使在支持css sticky 的浏览器中，也会模拟sticky 效果。 stickyfill.addone() 方法将粘性效果添加到指定元素。

现在，即使右侧面板的高度大于视口高度，它也会在滚动过程中跟随滚动条移动，直到完全隐藏。