页面侧边栏 - 监听滚动 - 切换状态

【vue组件封装】根据页面滚动高亮显示目录的侧边栏 侧边栏随着文档位置移动高亮亮 阅读详情

本文主要讲述页面滚动的监听过程
通过监听到的 scrollTop 值做相应的逻辑处理,如:样式切换等等

// 使用jQuery监听scrollTop的实时值
window.onscroll = function (e) {
    var top = $(window).scrollTop();
    if(top <= 1000) {
        $(".page1").addClass("curr").siblings().removeClass("curr");
    } else if(top > 2000 && top <= 3000) {
        $(".page2").addClass("curr").siblings().removeClass("curr");
    } else if(top > 3000 && top <= 4000) {
        $(".page3").addClass("curr").siblings().removeClass("curr");
    } else {
		$(".page4").addClass("curr").siblings().removeClass("curr");
	}
};
CSS滚动驱动动画:滚动即时间线,告别JS监听 前端动画性能优化一直是开发者关注的焦点,传统的滚动监听方案通过JavaScript频繁读取滚动位置并操作DOM,容易引发强制同步布局与掉帧。CSS滚动驱动动画作为原生CSS能力,将滚动进度直接映射为动画时间线,无需JS计算,由合成器线程处理,带来更流畅的滚动动效。其核心包括scroll()、view()与animation-range等API,分别支持跟随滚动容器、元素进入视口以及精确控制动画区间。无论是阅读进度条、卡片入场还是封面视差,都能以极简代码实现。浏览器支持方面可采用渐进增强,并结合prefers 阅读详情

相关推荐

Vue2项目实战:vue2-org-tree实现动态组织架构图

本文详细介绍了如何在Vue2项目中使用vue2-org-tree组件实现动态、可交互的组织架构图。内容涵盖从快速安装、基础渲染到核心功能实战,包括水平布局、节点展开折叠、响应式数据绑定、深度自定义节点内容以及事件处理。同时提供了性能优化、样式覆盖等避坑指南,并通过一个完整的企业级Demo展示了如何打造功能丰富的架构图,助力高效开发后台管理系统。

weixin_28040125的博客 522

html判断滚动条位置,通过scrollTop()判断滚动条到指定位置执行动画,代码执行很多次怎么办?...

1.通过scrollTop()判断滚动条到指定位置执行动画,代码执行很多次怎么办?点击查看DEMO,请用浏览器模拟手机查看效果,console.log有打印执行次数。现在的问题是我每次滚动他就执行一次,然后往回滚也会一直执行,一直判断scrollTop(),这样肯定会很卡,所以来请教大神们怎么解决。HTML代码如下:testJS代码如下:var nummmm = 0;$(document).rea...

weixin_42391485的博客 715

科研党必备!用Requests+BeautifulSoup升级版Nature爬虫(含PDF下载功能)

本文介绍了一套基于Python Requests和BeautifulSoup的Nature期刊智能爬虫系统,专为科研人员设计,可自动抓取论文标题、摘要及开放获取的PDF文档。系统采用模块化设计,包含请求管理、PDF检测和邮件通知等功能,确保高效合规地获取学术资源,提升科研效率。

weixin_29041767的博客 256

jquery如何使用滚动条监听事件

jquery使用滚动条监听事件的方法:1、使用【$(window).scrollTop():】获取垂直滚动条距离文档头部的高度;2、使用【$(document).scrollLeft()】获取水平滚动条的距离。 本教程操作环境:windows7系统、jquery3.2.1版本,该方法适用于所有品牌电脑。 jquery使用滚动条监听事件的方法: 先来一个例子: 1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function(){//在文档加载完毕后执行 $(...

ol753的博客 1261

ubuntu20.4源码安装最新gcc(gcc V12.2)

Ubuntu20.4自带的gcc为V9.4.0的版本,老版本的gcc存在不支持新版本C语言规范,在配置、编译、安装应用软件或工具时,可能存在不能正确安装的问题。(比如:libpqxx-7.7.4在配置时要求c++17版本的支持,但gcc V9.4.0版本不支持c++17)。因此本文介绍ubuntu20.4的系统下载最新gcc12.2版本源码,并进行本地编译、安装。本节内容包括gcc12.2的必备库安装和gcc12.2安装两部分内容组成。

q544344318的博客 1万+

CHIP-Seq数据分析流程

文章目录CHIP-Seq数据分析流程相关软件安装数据下载将SRA转化为fastq文件数据质控,过滤数据质控然后进行质控,过滤低质量reads,去接头比对下载小鼠参考基因组的索引和注释文件比对sam文件转bam为bam文件建立索引载入IGV查看用MACS call peak安装MACS结果注释与可视化 CHIP-Seq数据分析流程 相关软件安装 所需要的软件有sratoolkit, fastqc,bowtie2,samtools,macs2,htseq-count,bedtools和前面RNA-seq数据分析

bio_meimei的博客 8789

Vue监听页面区域scroll滚动条方法,实现区域内某元素吸顶效果

Vue监听区域滚动条事件,实现简易元素吸顶效果

XINGZI前端程序猿的博客 5319

Win10网络图标消失,网络图标变成灰色,打开网络设置闪退等问题解决

介绍 主要解决如下问题 网络图标消失 常用方法配置中出现的网络图标变成灰色没有办法打开 打开网络和Internet闪退 错误提示`网络发现已关闭。网络计算机和设备不可见。请启动网络和共享中心的网络发现。 连不上网,诊断结果为 依赖服务或组无法启动 这个问题大概率通过重装系统不能解决,请大家谨慎测试之后最后选择重装这个路线。 方法1:这一步一定要做(卸载三方软件) 把360安全卫士,软件管家这些东西都卸载掉。 我的问题一开始就是这个软件引起的,可能他检测到我还给台式机配了无线网卡,然后就把有线网络的一些

呆呆象呆呆的博客 3万+

js 滚动监听,核心方法

js 滚动监听,核心方法

橙-极纪元-JJYCheng 3100

PR工具timing report中setup time的计算过程

然后去pr工具里报告report_delay_calculation/reportDelayCalculation -from related_pin -to constraint_pin。这里constraint pin就是D pin (D0 D1 D2 D3),related pin就是 CK pin。我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧?

m0_61544122的博客 455

Windows 11 安装 Miniconda + Mamba,配置国内源

本文详细介绍了在 Windows 11 系统下安装 Miniconda 并配置 Mamba 的完整流程,包括选择精简版 Miniconda 的理由、安装过程中的关键选项设置、配置清华大学镜像源以加速包下载,以及在 base 环境中设置 pip 国内源。同时说明了 Mamba 相较 Conda 的性能优势,并指导用户完成 Mamba 安装与 Shell 集成,最终通过命令验证环境管理功能,帮助用户构建高效、轻量的 Python 开发环境。

寒水馨 · 轻量级技术文档 · hanshuixin.org 3345

vue中监听页面滚动和监听元素滚动

监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法中定义监听滚动执行的方法: scrollToTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollT

奋斗的小猪 1604

BPC坏点矫正

whatis the Bad Pixel? 坏点为死点,也就是基本不随照度变化呈现光电线性转换的关系。表现为暗态常亮,亮态常暗。 坏点分类:静态坏点:亮坏点,暗坏点。 动态坏点:在一定像素范围内,该点表现正常,而超过这一范围,该点表现的比周围像素要亮。与sensor ...

camerall 1万+

页面锚点滚动导航【详细版】

<template> <div> <ul class="louplus-nav"> <li v-for="(item, index) in nav" :key="index" :class="{'active':activeKey === item.key}" ...

刘洪瑞的博客 838

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

电梯楼层&监听滚动条

欢迎加入qq群(IT-程序猿-技术交流群):757345416 此功能基于jQuery,请先引入jQuery之后再进行一下代码粘贴,好了,步入正题,上代码: 1、css部分 * { margin:0px; padding:0px; font-family:'微软雅黑'; } .pa...

初心 - 杨瑞超个人博客 578

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

【Web APIs】元素滚动 scroll 系列属性 ② ( 右侧固定侧边栏 )

一、元素滚动 scroll 系列属性案例 - 右侧固定侧边栏 1、需求说明 2、HTML 结构 3、右侧固定侧边栏解析 ① 相关代码 ② 绝对定位 ③ 位置设置 4、window.pageYOffset 属性 ① window.pageYOffset 属性简介 ② scroll 滚动事件监听 ③ 向下滚动 侧边栏 由 绝对定位 -> 固定定位 ④ 向上滚动 侧边栏 由 固定定位 -> 绝对定位 ⑤ 判断 返回顶部 按钮 显示 / 隐藏 二、代码示例 1、代码示例 2、执行结果

让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 1200

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

侧边导航栏随窗口滚动切换选中,点击对应内容元素滚动到浏览器窗口的可视区域内

<template> <div class="sideBar"> <div class="side_wrap"> <div class="side_item" @click="handleClick(item, index)" v-for="(item, index) in sideList" :class="{ active: item.active }" :k

qq_42613224的博客 2166

docsify单文档生成页面侧边栏可折叠

因为点击侧边栏也会跳转到对应位置,所以只需要监听滚动事件就可以了,但是还有一个明显的bug,当文档从下往上滚动时,触发不到箭头切换,暂时还没有想到好的解决思路,如果大佬们有其他方法,希望能给小弟推荐一下,感激不尽。本来呢是用这个东西做一个使用文档, 但是在使用时遇到一个问题,单个markdown文档生成出来了三级目录,要求侧边能够折叠并且有下一级的情况下展示出折叠箭头, 有人推荐使用。文件,所有转换工作都是在运行时。如果你想要开始使用它,只需要创建一个。箭头是有了,接下来就剩展开与收起时箭头的切换了。

qq_60876952的博客 2377

主题页面滚动监听:everfu/hexo-theme-solitude实现导航栏动态样式变化

在现代网页设计中,导航栏的动态样式变化不仅能提升用户体验,还能增强页面的视觉吸引力。**everfu/hexo-theme-solitude**作为一款设计师风格的Hexo主题,通过精心设计的滚动监听机制,实现了导航栏在页面滚动过程中的智能样式调整。本文将详细解析这一功能的实现原理,帮助开发者理解如何在自己的主题中应用类似效果。 ## 滚动监听的核心实现:JavaScript逻辑解析 主题的滚

gitblog_00435的博客 723

tldraw 自定义页面面板实战:在 React 中构建画布外的页面侧边栏与实时缩略图

**本篇指南基于 tldraw SDK 官方示例应用([examples app](https://link.gitcode.com/i/12e310c093c8ce93222562e5ecd92eca))中的 page-panel 示例展开**,讲解如何用 React 与 tldraw 编辑器 API 把内置的页面菜单(Page Menu)替换成运行在**自己 DOM 里、画布之外**的自定义页

gitblog_00752的博客 375

StartBootstrap-Simple-Sidebar:10个技巧打造完美侧边栏导航

StartBootstrap-Simple-Sidebar是一个基于Bootstrap构建的侧边栏导航HTML模板,它提供了简洁而强大的侧边栏解决方案,帮助开发者快速实现响应式的侧边栏导航功能。无论是构建管理后台、博客系统还是企业网站,这个模板都能为你的项目带来专业的导航体验。 ## 📋 快速开始:5分钟上手侧边栏模板 要开始使用StartBootstrap-Simple-Sidebar,只

gitblog_00502的博客 858

告别卡顿:Bilibili-Evolved自定义滚动行为性能优化指南

Bilibili-Evolved作为一款强大的哔哩哔哩增强脚本,不仅提供丰富的自定义功能,还能通过优化滚动行为显著提升浏览体验。本文将介绍如何通过简单设置和组件配置,解决B站页面滚动卡顿问题,让你的视频浏览更加流畅。 ## 为什么B站页面会卡顿? B站默认界面包含大量动态内容、广告和推荐组件,这些元素在滚动时会消耗大量浏览器资源。特别是在低配设备或同时打开多个标签页时,滚动卡顿、掉帧现象尤为明

gitblog_01193的博客 934

Livewire 4 `@persist` 指令实战指南:在 wire:navigate 页面切换间无缝保留 DOM 元素状态

本文深入讲解 Livewire 4 的 `@persist` 指令——它允许在 `wire:navigate` 驱动的 SPA 式页面导航中,将音频播放器、聊天窗口、导航栏等元素及其内部状态原样保留在 DOM 中,避免重新初始化。读完本文,你将掌握 `@persist` 的完整语法、在布局中的正确放置位置、与滚动保留及活动链接高亮的配合方式,并通过源码理解其底层"先摘除、后放回"的实现原理。 `

gitblog_00708的博客 394

yuzu 模拟器新手完全指南:在电脑上运行 Switch 游戏的完整链路

yuzu 是一款用 C++ 编写的开源免费任天堂 Switch 模拟器,能在 Windows、Linux 和 Android 上以全速运行大部分 Switch 商业游戏,适合想在 PC 或安卓设备上跑 Switch 游戏、并希望随时查阅其实现细节的玩家。它值得选的理由有三点:代码采用 GPL v3 许可完全公开,任何人可审查;Windows、Linux、Android 三端均有官方构建并持续更新;

gitblog_00708的博客 357

Vue响应式侧边栏:跨设备状态管理与布局切换实战

响应式布局是现代前端开发的基础能力,其核心在于根据设备特征动态调整界面结构。实现原理通常依赖断点判定与状态管理,通过matchMedia监听视口变化,驱动布局切换。技术价值在于提升多端一致性与用户体验,避免纯CSS方案的局限性。在后台管理系统、移动端H5等场景中应用广泛。Vue 3的组合式API为状态管理提供了更优雅的封装方式,结合localStorage持久化与CSS变量联动,可解决首屏闪烁、抽屉滚动穿透等常见问题。

weixin_34116110的博客 274

Una UI Sidebar完全指南:响应式侧边栏与状态持久化最佳实践

在 Nuxt 项目中搭建一套响应式侧边栏(Sidebar)往往需要处理移动端抽屉、桌面端折叠、状态记忆等一堆琐事。Una UI Sidebar 组件把这一切都封装好了:它是基于 Unocss 引擎的原子化 UI 框架 Una UI 提供的侧边栏解决方案,开箱即用支持响应式适配与状态持久化,让你用极少的代码就获得专业级的管理后台导航体验。 [![Una UI Sidebar组件结构示意图,展示响应

gitblog_00976的博客 234
上一篇: CSS 兼容属性
下一篇: Dom元素 - 清除浮动
JasoncodeQvQ
博客等级 码龄7年 458粉丝 97原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值