当页面产生滚动,位置超过侧边栏的顶部阈值后,侧边栏变为固定定位

ops/2024/10/10 20:03:55/
htmledit_views">

需求:当页面产生滚动,位置超过侧边栏的 顶部阈值后,侧边栏变为固定定位。

解决方法:使用position: sticky 粘性定位

刚开始的想法是获取滚动距离,动态添加position: fixed,但是会出现动态添加fixed会导致宽度位置发生变化。最后选择了position: sticky

javascript"><div class="content-right"><div class="right-fixed"><div v-for="(item, index) in data.hotList" :key="index" class="content-right-item" @click="rightLink(item)"><div class="num">{{ index + 1 }}</div><div class="right-title">{{ item.collegeTitle }}</div></div></div></div>.right-fixed {position: -webkit-sticky; /* 对于 Safari 的兼容性 */position: sticky;right: 0;top: 0;}


http://www.ppmy.cn/ops/123628.html

相关文章

基于SpringBoot+Vue+uniapp的高校教务管理小程序系统设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行&#xff0c;效果展示图 代码运行&#xff0c;效果展示图 代码运行&#xff0c;效果展示图 代码运行&#xff0c;效果展示图 代码运行&#xff0c;效果展示图 5. 技…

探索MultiApp:一款强大的多应用管理工具

探索MultiApp&#xff1a;一款强大的多应用管理工具 在这个数字化时代&#xff0c;多任务并行已经成为我们日常生活的一部分。无论是工作还是娱乐&#xff0c;我们都需要频繁地在多个应用之间切换。今天&#xff0c;我要向大家介绍一款能够帮助你在同一设备上无缝切换和管理多…

2024年【金属非金属矿山(地下矿山)安全管理人员】复审考试及金属非金属矿山(地下矿山)安全管理人员在线考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员复审考试考前必练&#xff01;安全生产模拟考试一点通每个月更新金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员在线考试题目及答案&#…

企业经营中保密就是 “保命”

据安全部门统计&#xff1a;八成以上文件泄密都不是黑客窃取的&#xff0c;而是内部人员造成的。 员工随手发一封邮件&#xff0c;U盘考取一份数据&#xff0c;或在工位随手拿手机拍照&#xff0c;这些工作中看似不起眼的小动作&#xff0c;都隐藏着企业数据泄露的危险。 老干…

风口来了:有空可以考个人工智能证书!

随着人工智能技术的不断升级和发展&#xff0c;在医疗、金融、制造业等多个领域都涉及到了人工智能&#xff0c;人工智能技术的广泛应用&#xff0c;使得对人工智能应用工程师的职业需求也逐年增长。 一、证书出台背景&#xff1a; 为进一步贯彻落实中共中央印发《关于深化人才…

LeetCode 3310. 移除可疑的方法

LeetCode 3310. 移除可疑的方法 你正在维护一个项目&#xff0c;该项目有 n 个方法&#xff0c;编号从 0 到 n - 1。 给你两个整数 n 和 k&#xff0c;以及一个二维整数数组 invocations&#xff0c;其中 invocations[i] [ai, bi] 表示方法 ai 调用了方法 bi。 已知如果方法 k…

rust使用tokio

Rust 是一种系统编程语言&#xff0c;它强调安全、并发和高性能。tokio 是一个基于 Rust 的异步运行时库&#xff0c;专门用于构建异步应用程序。使用 tokio 可以轻松地管理异步任务&#xff0c;并实现高效的并发。 添加依赖&#xff1a; cargo add tokio -F full 示例&…

Redis 缓存淘汰策略:LRU 和 LFU 的缺点及解决方案详解

引言 Redis 是一款高性能的内存数据库&#xff0c;它的缓存淘汰机制是保障内存使用效率和应用性能的关键。为了在内存有限的情况下保证缓存数据的有效性&#xff0c;Redis 提供了多种缓存淘汰策略&#xff0c;其中 LRU&#xff08;Least Recently Used&#xff0c;最近最少使用…