粘性定位之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>

效果图

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

相关推荐
酷酷的阿云7 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205879 分钟前
web端手机录音
前端
齐 飞14 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹31 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10092 小时前
ffmpeg重复回听音频流,时长叠加问题
前端