粘性定位之JavaScript实现

前言

在上一篇文章中（粘性定位之CSS （ position: sticky ）实现），我们已经知道如何使用CSS中的position: sticky来实现粘性定位，这篇文章，我们来学习一下如何利用JavaScript来实现一个简单的粘性定位。

JavaScript实现粘性定位

步骤

获取滚动位置：使用 JavaScript 监听滚动事件，获取页面滚动的位置。
检查条件：在滚动事件的处理函数中，对滚动位置进行判断，确定是否需要将元素设为粘性定位。这个判断通常是基于容器元素的位置或页面滚动的位置。
动态改变样式 ：如果满足条件，通过修改元素的 CSS 样式，例如改变 position 或 top 属性，来使元素表现为粘性布局。

注意事项

考虑性能问题，避免在滚动事件处理中执行过多计算或操作，以减少页面的负担。
谨慎选择粘性布局的元素，避免过度使用，影响页面的整体布局和美观性。
在实现粘性布局时，要注意页面的可访问性，确保元素位置的改变不会影响用户对页面内容的正常访问和阅读。
测试不同设备和浏览器下的表现，确保粘性布局在各种情况下都能正常工作。

如下示例：

html 复制代码

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script> // 引入lodash库
    <style>
        body {
            height: 2000px;
        }

        .nav {
            text-align: center;
        }

        ul {
            list-style: none;
        }

        li {
            height: 50px;
            line-height: 50px;
        }

        .title {
            background-color: red;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="nav">
        <span>头部</span>
    </div>
    <div class="content">
        <ul>
            <li class="box"></li>
            <li class="title">内容</li>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>

    <script>
        const title = document.querySelector('.title');
        const box = document.querySelector('.box');
        box.style.display = 'none';
        window.addEventListener('scroll', _.throttle(function () {
            const containerTop = window.scrollY || window.pageYOffset;
            console.log(containerTop);
            if (containerTop >= 44) {
                title.style.position = 'fixed'
                title.style.top = '0'
            } else {
                title.style.position = '';
                title.style.top = '44'
            }
            box.style.display = containerTop >= 44 ? 'block' : 'none';
        }, 100)); // 设置节流时间为 100ms  性能优化
    </script>
</body>

</html>

效果图

滚动之前滚动之后，内容固定在顶部