vue3 监听浏览器滚动事件，页面滚动时实现不同的nav样式，通过新增类选择器来实现

于 2024-05-30 10:22:07 发布
阅读量383 收藏
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64545713/article/details/139316489
版权 
var y = window.scrollY;

y 是文档从顶部开始滚动过的像素值。

说明:使用window.scrollY来显示文档从顶部开始滚动的像素，然后如果进行滚动则给该元素新增一个类选择器，否则不新增。

通过计算属性来进行给head实现动态新增style

时光风暴
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
生活类微信模_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-03
2. 选择器：如ID选择器 (#id)、类选择器 (.class)、属性选择器 [attr=value] 等，用于精准定位样式。 3. 响应式设计：使用媒体查询 (@media) 来根据设备特性调整样式。 4. Flexbox和Grid布局：提供更灵活的二维布局...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H209.zip
05-09
通过选择器（如类选择器、ID选择器、伪类等）定位HTML元素，并应用样式。CSS3新增了许多功能，如媒体查询（Media Queries）用于响应式设计，过渡和动画（Transitions & Animations）增强用户体验，以及Flexbox和Grid...
vue3中监听滚动条事件
菠萝蜜
09-13 3473
监听滚动条事件
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> [removed][removed] <style type="text/css"> #box { width: 100%; height: 2000px; } </style
Vue3定义路由滚动行为
rqz__的博客
05-18 320
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
vue3页面绑定滚动事件上拉加载更多
weixin_49295874的博客
02-26 4279
//滚动区域内的容器 <div id="scroll"></div> //滚动事件 const onScroll = () => { //可滚动容器的高度 let innerHeight = document.getElementById("scroll").clientHeight; //屏幕尺寸高度 let outerHeight = document.documentElement.clientHeight;
【Vue3】利用VueUse实现useInfiniteScroll虚拟滚动操作
m0_64373473的博客
10-24 1406
理解虚拟滚动的实现原理以及vueuse这一第三方功能类库的基本情况 才能更好的将其结合实现虚拟滚动操作
vue 计算滚动距离顶部距离 改变背景色及文字
Mr_zrh的博客
08-03 306
【代码】vue 计算滚动距离顶部距离 改变背景色及文字。
shineniefei.github.io:个人博客
03-30
1. `选择器`：如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等，用于定位要设置样式的HTML元素。 2. `属性`：如`color`（颜色）、`font-size`（字体大小）、`background-color`（背景色）、...
html+css素材.zip
最新发布
01-30
通过选择器（如类名、ID、元素名）和属性（如color、font-size、margin），我们可以定义元素的颜色、字体、大小、位置等视觉效果。CSS还可以实现响应式设计，使网页在不同设备上都能良好显示。CSS3新增了很多特性，...
Web
03-22
通过选择器，如元素选择器、类选择器和ID选择器，可以指定哪些元素应用何种样式。CSS3是CSS的最新版本，带来了更多的选择器、过渡效果、动画、多列布局、媒体查询等新特性，使得网页设计更加灵活和响应式。 ...
vue3关于滚动条的应用
dh99999900的博客
12-03 1505
vue3关于滚动条的详细应用
Vue3——区域内无限滚动
qq812457115的博客
10-31 1055
【代码】Vue3——区域内无限滚动。
vue3怎么监听页面的滚动
热门推荐
m0_51636525的博客
10-19 1万+
监听滚动的hook
Vue3自定义列表无缝滚动
Working_hard_111的博客
07-17 681
在Vue3项目中，难免会遇到让列表滚动的需求，下方为封装好的组件，可直接赋值运行（如需特定事件跳特定的高度，需自行修改。Vue2版本的已放上一篇文章）
vue3里监听window事件(放大缩小devicePixelRatio)或者document事件（窗口宽高变化documentElement.clientWidth）
Yany的博客
07-01 3599
监听事件
22/09/26 vue3,页面监听scroll&移除scroll
Nighsloth的博客
09-26 2444
vue3,移除和监听scroll事件
【vue组件封装】根据页面滚动高亮显示目录的侧边栏
m0_68324632的博客
07-26 2752
现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发。所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。......
vue3 监听全局滚动事件
08-17
在 Vue 3 中，你可以使用 `onMounted` 钩子和 `window.addEventListener` 方法来监听全局滚动事件。具体步骤如下： 1. 在组件中引入 `onMounted` 钩子： ```javascript import { onMounted } from 'vue'; ``` 2. 在组件中定义一个监听滚动事件的方法： ```javascript function handleScroll() { // 处理滚动事件 } ``` 3. 在 `onMounted` 钩子中添加全局滚动事件监听： ```javascript onMounted(() => { window.addEventListener('scroll', handleScroll); }); ``` 4. 当组件销毁时，需要清除监听事件： ```javascript onUnmounted(() => { window.removeEventListener('scroll', handleScroll); }); ``` 这样就可以在 Vue 3 中监听全局滚动事件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值