首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何添加:当我的窗口滚动大于50时,悬停在我的类.active上

要实现当窗口滚动大于50时悬停在类.active上,可以通过以下步骤来实现:

  1. 首先,需要使用JavaScript来监听窗口滚动事件。可以使用window.addEventListener方法来添加滚动事件的监听器。
代码语言:txt
复制
window.addEventListener('scroll', function() {
  // 在这里编写滚动事件的处理逻辑
});
  1. 在滚动事件的处理逻辑中,可以使用window.scrollY属性来获取当前窗口的垂直滚动距离。然后判断滚动距离是否大于50。
代码语言:txt
复制
window.addEventListener('scroll', function() {
  if (window.scrollY > 50) {
    // 当滚动距离大于50时的处理逻辑
  }
});
  1. 在滚动距离大于50时的处理逻辑中,可以通过修改类.active的样式来实现悬停效果。可以使用document.querySelector方法来获取类.active的元素,然后使用element.classList.add方法来添加一个新的类,该类可以定义悬停时的样式。
代码语言:txt
复制
window.addEventListener('scroll', function() {
  if (window.scrollY > 50) {
    var activeElement = document.querySelector('.active');
    activeElement.classList.add('hover');
  }
});
  1. 最后,需要在CSS中定义.hover类的样式,以实现悬停效果。
代码语言:txt
复制
.hover {
  /* 在这里定义悬停时的样式 */
}

综上所述,以上是实现当窗口滚动大于50时悬停在类.active上的步骤。请注意,这只是一个示例,具体实现方式可能因项目需求和技术栈而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

IntelliJ IDEA 2021.2 中,您完全不需要鼠标的 10 种情况

还可以使用 F12 将焦点返回上次使用工具窗口(作为该工具窗口特定快捷键替代方法)。 在下面的 图片中,当我使用 Escape 键将焦点返回编辑器窗口时,演示助手没有显示文本“Escape”。...显示工具窗口 我们先来看看开发者们大多是如何在 IntelliJ IDEA 中显示工具窗口。...将鼠标悬停在 Pull Requests 选项卡,您可以查看是否已为此工具窗口分配快捷键。当前示例中没有分配快捷键。我们来分配一个。...或者,如果已为工具窗口分配快捷键,例如 Alt+1 对应 Project 工具窗口或 Alt+7 对应 Structure 工具窗口,那么将鼠标悬停在工具窗口栏中选项卡时,快捷键会随之显示。...快速查看、接口、枚举、记录、方法、变量声明等来源 如果要在阅读已编写测试时快速查看方法定义,只需将光标放在方法名称并按 Ctrl+Shift+I。这样,不必导航到另一个即可阅读感兴趣代码。

10210
  • bootstrap快速入门笔记(七)-表格,表单

    Class 描述 .active 鼠标悬停在行或单元格时所设置颜色 .success 标识成功或积极动作 .info 标识普通提示信息或动作 .warning 标识警告或需要用户注意 .danger...标识危险或潜在带来负面影响动作 7,响应式表格:将.table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备(小于768px)水平滚动。...当屏幕大于 768px 宽度时,水平滚动条消失。   a,垂直方向内容截断:     响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部内容截断。...在内联表单,    们将这些元素宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你布局需      求,可能需要一些额外定制化组件。   ...b,一定要添加 label 标签: 3,水平排列表单.form-horizontal :联合使用 Bootstrap 预置栅格,可以将 label 标签和控件组水平并排布局。

    3K30

    讲几个vueuseElements模块里实用方法

    可以打开控制台看看监听结果。 在 HTML 元素添加了 data-myid 属性,这中写法是 HTML5 新增,data-* 可以自定义元素属性。...和前面提到 useDocumentVisibility 不同,useDocumentVisibility 是监听页面是否在屏幕展示,就算切换了窗口,只要浏览器有一丁点位置在屏幕展示的话,useDocumentVisibility...因为前面讲解内容偏向于页面可见、聚焦方面,而 useMouseInElement 可以监听鼠标有没有悬停在指定元素。看上去和前面的章节有一点点联系吧,所以这节就起了这个标题。....target { background: rgb(131, 133, 134); width: 300px; } useMouseInElement 除了可以监听鼠标是否悬停在元素...它能监听元素: CSS display 是否为 none; 元素是否在当前窗口(有滚动情况下,元素可能会出现在窗口外)。 <!

    44410

    CSS @media 规则

    特性值描述any-hover是否有任何可用输入机制允许用户(将鼠标等)悬停在元素?在 Media Queries Level 4 中被添加。...在 Media Queries Level 5 中被添加。grid输出设备使用网格屏幕还是点阵屏幕?height视口(viewport)高度。hover主输入机制是否允许用户将鼠标悬停在元素?...max-color-index设备可以显示最大颜色数。max-height显示区域最大高度,例如浏览器窗口。max-monochrome单色(灰度)设备每种“颜色”最大位数。...min-monochrome单色(灰度)设备每种“颜色”最小位数。min-resolution设备最低分辨率,使用 dpi 或 dpcm。min-width显示区域最小宽度,例如浏览器窗口。...overflow-inline沿内联轴溢出视口(viewport)内容是否可以滚动?在 Media Queries Level 4 中被添加。pointer主要输入机制是一个指针设备吗?

    1.7K60

    bootstrap表格

    bootstrap提供了几种表格样式: 条纹表格.table-striped(作用在tableclass名),实现隔行换色 ...名加载表格tr里,bootstrap提供了几种状态:success(成功绿),info(信息蓝),warning(警告橙),danger(危险红),实现表格行出现相应颜色,成功绿实现( 第三行1 第三行2 第三行3 此外,bootstrap还提供了一种active状态,就是默认鼠标悬停在某行表格...,效果类似table-hover.使用方法和之前状态表格一样作用在tr上进行相应class名取为active. ---- 表格响应式 表格响应式实现比较简单,在作用表格父级元素class属性加上....table-responsive属性,可以实现下述表格响应式,当窗口尺寸小于768px则出现滚动条 响应式表格实现: <table

    2.3K20

    JavaScript笔记(24)

    本文由“壹伴编辑器”提供技术支持 现在做淘宝案例:返回顶部 滚动窗口至文档特定位置 window.scroll(x,y) 这是之前写淘宝侧边栏页面: 注意:里面的x和y是不用加单位...现在我们要做最后一个效果,就是当鼠标点击过后,云朵要停在点击li....,就把距离储存下来,将点击li位置作为原点,鼠标离开时也会回到点击li....当我们点击了某个li时,将他距离左侧位置储存在current中: 最后再将鼠标离开事件还原位置改成current,这样鼠标点击后current就会变化,还原位置也会变成点击后位置....看看效果如何吧(不得不说真的挺丑): 结束啦,又要学习新东西了 后面又是新部分,就开新一篇写吧

    20910

    11 个高级 Vue 编码技巧

    已经测试了多种方法和包来访问fill属性,而不会炸毁模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中一个或多个填充属性最佳方法,实际最有效显而易见方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中:在上面的示例中,当我将鼠标悬停在 SVG 时,只是在要更改部分设置一个(此处称为...最近在一个项目中使用它来生成动态侧边栏导航组件。在路由器中某些路由设置了一个 showInSidebar 元数据属性,想隐藏在侧边栏中。...能够控制如何直接从路由器显示本地路由以及是否使用 API 提供路由。还用它来制作自动面包屑以显示用户路线历史。...你可能已经注意到了exact-active-class代码: ? 有了这个,如果路由器链接目的地与当前路由匹配,Vue 会自动设置一个活动

    2.6K30

    亲手打造属于你 React Hooks

    在这个循序渐进指南中,将通过分解为自己应用程序创建三个钩子,以及创建这些钩子是为了解决什么问题,向您展示如何创建自己自定义React钩子。...用户只需将鼠标悬停在代码片段,单击剪贴板按钮,代码就会被添加到他们电脑剪贴板中,以便他们可以在任何他们想要地方粘贴和使用代码。...在你可以无限滚动应用中,比如微博,一旦用户点击页面底部,你就需要获取更多帖子。 让我们看看如何自己创建一个 usePageBottom钩子,用于类似的用例,比如创建无限滚动。...useDeviceDetect Hook 正在构建一个新登录页面时,在移动设备经历了一个非常奇怪错误。在台式电脑,这些样式看起来很棒。...但当我着眼于移动平台时,发现所有内容都是不合适,并且都是破碎追踪这个问题到一个名为react-device-detect库,用它来检测用户是否有移动设备。如果是,将删除标题。

    10.1K60

    11 个高级 Vue 编码技巧

    已经测试了多种方法和包来访问fill属性,而不会炸毁模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中一个或多个填充属性最佳方法,实际最有效显而易见方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中:在上面的示例中,当我将鼠标悬停在 SVG 时,只是在要更改部分设置一个(此处称为...最近在一个项目中使用它来生成动态侧边栏导航组件。在路由器中某些路由设置了一个 showInSidebar 元数据属性,想隐藏在侧边栏中。...能够控制如何直接从路由器显示本地路由以及是否使用 API 提供路由。还用它来制作自动面包屑以显示用户路线历史。...你可能已经注意到了exact-active-class代码: ? 有了这个,如果路由器链接目的地与当前路由匹配,Vue 会自动设置一个活动

    2.6K20

    10个关于 Vue 高级开发技巧

    已经测试了多种方法和包来访问fill属性,而不会炸毁模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中一个或多个填充属性最佳方法,实际最有效显而易见方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中: 在上面的示例中,当我将鼠标悬停在 SVG 时,只是在要更改部分设置一个(此处称为...最近在一个项目中使用它来生成动态侧边栏导航组件。在路由器中某些路由设置了一个 showInSidebar 元数据属性,想隐藏在侧边栏中。...能够控制如何直接从路由器显示本地路由以及是否使用 API 提供路由。还用它来制作自动面包屑以显示用户路线历史。...你可能已经注意到了exact-active-class代码: ? 有了这个,如果路由器链接目的地与当前路由匹配,Vue 会自动设置一个活动

    6.1K10

    10个关于 Vue 高级开发技巧

    已经测试了多种方法和包来访问fill属性,而不会炸毁模板,结果证明,添加hover或active CSS 状态以更改 fill SVG 中一个或多个填充属性最佳方法,实际最有效显而易见方法...一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中: 在上面的示例中,当我将鼠标悬停在 SVG 时,只是在要更改部分设置一个(此处称为...最近在一个项目中使用它来生成动态侧边栏导航组件。在路由器中某些路由设置了一个 showInSidebar 元数据属性,想隐藏在侧边栏中。...能够控制如何直接从路由器显示本地路由以及是否使用 API 提供路由。还用它来制作自动面包屑以显示用户路线历史。...在 SideNavbar 组件模板中: 你可能已经注意到了exact-active-class代码: 有了这个,如果路由器链接目的地与当前路由匹配,Vue 会自动设置一个活动

    6K20

    vim 常用命令

    ,这里Esc是必须,否则命令不生效。 w 向前移动一个单词(光标停在单词首部),如果已到行尾,则转至下一行行首。此命令快,可以代替l命令。...b 向后移动一个单词 2b 向后移动2个单词 e,同w,只不过是光标停在单词尾部 ge,同b,光标停在单词尾部。 ^ 移动到本行第一个非空白字符。...Ctrl + e 向下滚动一行 Ctrl + y 向上滚动一行 Ctrl + d 向下滚动半屏 Ctrl + u 向上滚动半屏 Ctrl + f 向下滚动一屏 Ctrl + b 向上滚动一屏...:1,co co 将整个文件复制一份并添加到文件尾部。...窗口命令 :split或new 打开一个新窗口,光标停在顶层窗口上 :split file或:new file 用新窗口打开文件 split打开窗口都是横向,使用vsplit可以纵向打开窗口

    1.4K21

    Vim 命令、操作、快捷键(收藏大全)

    ,这里Esc是必须,否则命令不生效。 w 向前移动一个单词(光标停在单词首部),如果已到行尾,则转至下一行行首。此命令快,可以代替l命令。...b 向后移动一个单词 2b 向后移动2个单词 e,同w,只不过是光标停在单词尾部 ge,同b,光标停在单词尾部。 ^ 移动到本行第一个非空白字符。...Ctrl + e 向下滚动一行 Ctrl + y 向上滚动一行 Ctrl + d 向下滚动半屏 Ctrl + u 向上滚动半屏 Ctrl + f 向下滚动一屏 Ctrl + b 向上滚动一屏 撤销和重做...:1,$ co $ 将整个文件复制一份并添加到文件尾部。...窗口命令 :split或new 打开一个新窗口,光标停在顶层窗口上 :split file或:new file 用新窗口打开文件 split打开窗口都是横向,使用vsplit可以纵向打开窗口

    94330

    138 条 Vim 命令、操作、快捷键全集

    ,这里Esc是必须,否则命令不生效。 w 向前移动一个单词(光标停在单词首部),如果已到行尾,则转至下一行行首。此命令快,可以代替l命令。...b 向后移动一个单词 2b 向后移动2个单词 e,同w,只不过是光标停在单词尾部 ge,同b,光标停在单词尾部。 ^ 移动到本行第一个非空白字符。...Ctrl + e 向下滚动一行 Ctrl + y 向上滚动一行 Ctrl + d 向下滚动半屏 Ctrl + u 向上滚动半屏 Ctrl + f 向下滚动一屏 Ctrl + b 向上滚动一屏 撤销和重做...:1,$ co $ 将整个文件复制一份并添加到文件尾部。...窗口命令 :split或new 打开一个新窗口,光标停在顶层窗口上 :split file或:new file 用新窗口打开文件 split打开窗口都是横向,使用vsplit可以纵向打开窗口

    1.3K60

    Vim 命令、操作、快捷键(建议收藏)

    ,这里Esc是必须,否则命令不生效。 w 向前移动一个单词(光标停在单词首部),如果已到行尾,则转至下一行行首。此命令快,可以代替l命令。...b 向后移动一个单词 2b 向后移动2个单词 e,同w,只不过是光标停在单词尾部 ge,同b,光标停在单词尾部。 ^ 移动到本行第一个非空白字符。...Ctrl + e 向下滚动一行 Ctrl + y 向上滚动一行 Ctrl + d 向下滚动半屏 Ctrl + u 向上滚动半屏 Ctrl + f 向下滚动一屏 Ctrl + b 向上滚动一屏 撤销和重做...:1,$ co $ 将整个文件复制一份并添加到文件尾部。...窗口命令 :split或new 打开一个新窗口,光标停在顶层窗口上 :split file或:new file 用新窗口打开文件 split打开窗口都是横向,使用vsplit可以纵向打开窗口

    1.2K10

    教程 | Vim 教程【命令-操作-快捷键】

    ,这里Esc是必须,否则命令不生效。 w 向前移动一个单词(光标停在单词首部),如果已到行尾,则转至下一行行首。此命令快,可以代替l命令。...b 向后移动一个单词 2b 向后移动2个单词 e,同w,只不过是光标停在单词尾部 ge,同b,光标停在单词尾部。 ^ 移动到本行第一个非空白字符。...Ctrl + e 向下滚动一行 Ctrl + y 向上滚动一行 Ctrl + d 向下滚动半屏 Ctrl + u 向上滚动半屏 Ctrl + f 向下滚动一屏 Ctrl + b 向上滚动一屏 撤销和重做...:1,$ co $ 将整个文件复制一份并添加到文件尾部。...窗口命令 :split或new 打开一个新窗口,光标停在顶层窗口上 :split file或:new file 用新窗口打开文件 split打开窗口都是横向,使用vsplit可以纵向打开窗口

    61820

    138 条 Vim 命令、操作、快捷键全集

    ,这里Esc是必须,否则命令不生效。 w 向前移动一个单词(光标停在单词首部),如果已到行尾,则转至下一行行首。此命令快,可以代替l命令。...b 向后移动一个单词 2b 向后移动2个单词 e,同w,只不过是光标停在单词尾部 ge,同b,光标停在单词尾部。 ^ 移动到本行第一个非空白字符。...Ctrl + e 向下滚动一行 Ctrl + y 向上滚动一行 Ctrl + d 向下滚动半屏 Ctrl + u 向上滚动半屏 Ctrl + f 向下滚动一屏 Ctrl + b 向上滚动一屏 撤销和重做...:1,$ co $ 将整个文件复制一份并添加到文件尾部。...窗口命令 :split或new 打开一个新窗口,光标停在顶层窗口上 :split file或:new file 用新窗口打开文件 split打开窗口都是横向,使用vsplit可以纵向打开窗口

    1K00
    领券