粘性定位之JavaScript实现

前言

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

JavaScript实现粘性定位

步骤

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

注意事项

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

如下示例:

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/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>

效果图

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

相关推荐
花海少爷4 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7948 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You16 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生28 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410930 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap42 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript