首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >是否有办法使按钮在向下滚动时褪色?

是否有办法使按钮在向下滚动时褪色?
EN

Stack Overflow用户
提问于 2022-08-25 17:35:49
回答 2查看 60关注 0票数 0

我有一个弹跳向下箭头在我的网站屏幕底部(按钮部分还没有完成,但视觉部分在那里),停留在相同的地方,当你向下滚动页面。

这是按钮的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@keyframes bouncing {
    0% {bottom: 0;}
    50% {bottom: 10px;}
    100% {bottom: 0;}
}

.arrow {
    animation: bouncing 1s infinite ease-in-out;
    bottom: 0;
    display: block;
    height: 50px;
    left: 50%;
    position: absolute;
    width: 50px;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div>
    <img class="arrow" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"/>
</div>

在JS或CSS中向下滚动页面时,是否有办法使箭头淡出?

谢谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-08-26 02:48:46

为了添加@的答案,这个答案很好,但只是“隐藏”和“显示”箭头而不是褪色,我对代码做了一些修改。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let opacityPercentage = 100;

document.addEventListener('DOMContentLoaded', () => {
  const arrowElement = document.getElementById('arrow');
  
  window.onscroll = () => {
    opacityPercentage = Math.max(100 - window.pageYOffset, 0);
    arrowElement.style.opacity = opacityPercentage / 100;
  }
});
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@keyframes bouncing {
    0% {bottom: 0;}
    50% {bottom: 10px;}
    100% {bottom: 0;}
}

.arrow {
    animation: bouncing 1s infinite ease-in-out;
    bottom: 0;
    display: block;
    height: 50px;
    left: 50%;
    position: absolute;
    width: 50px;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style="height: 200vh;"> 
  <div>
      <img class="arrow" id="arrow" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"/>
  </div>
</div>

票数 1
EN

Stack Overflow用户

发布于 2022-08-25 18:54:07

当存在滚动事件时,您可以收听window.onscroll来侦听您所处的偏移位置。下面是使用javascript向下滚动以隐藏图像的解决方案:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  console.log("scrolled");
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos >= currentScrollPos) {
    console.log(prevScrollpos, currentScrollPos);
    document.getElementById("arrow").style.display = "block";
  } else {
    console.log(prevScrollpos, currentScrollPos);
    document.getElementById("arrow").style.display = "none";
  }
};

注意:您需要向图像标记中添加一个值为arrow的id。这里还有示例代码的链接

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73495257

复制
相关文章
如何使用JavaScript从字符串中删除HTML标签?
我们可以使用以下示例从带有 JavaScript 的字符串中删除 HTML 标签 -
很酷的站长
2022/12/04
12.9K0
如何使用JavaScript从字符串中删除HTML标签?
如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]
翻译:疯狂的技术宅 原文:https://medium.freecodecamp.org/how-to-remove-falsy-values-from-an-array-in-javascript-e623dbbd0ef2
疯狂的技术宅
2019/05/06
9.5K0
如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]
Google JavaScript API 的使用
您可以使用JavaScript客户端库与Web应用程序中的Google API(例如,人物,日历和云端硬盘)进行交互。请按照此页面上的说明进行操作。
拿我格子衫来
2022/01/24
3K0
ABAP 字段隐藏的方法
正文部分 ​ *数据库表spfli相关 TABLES: spfli, sflight. START-OF-SELECTION. SKIP. *输出 ULINE AT /(91). WRITE: / sy-vline,(15) '航线承运人', sy-vline , (15) '航班连接', sy-vline, (15) '国家代码', sy-vline,(15) '起飞城市', sy-vline, (15) '起飞机场',sy-vline. ULINE A
matinal
2020/11/27
1K0
HTML中的javascript交互
在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的javascript进行交互,Android也对交互做了很好的封装,所以很容易实现例如:点击网页中的按钮Android调用原生对话框,点击网页中的电话号码调用Android拨号APP。这篇给大家介绍下如何实现Android与HTML+JS的交互。 有的人可能不理解什么是javascript,可以简单理解为它在HTML中
xiangzhihong
2018/02/01
4K0
HTML中的javascript交互
如何使用 Python 隐藏图像中的数据
秘密数据可以是任何格式的数据,如文本甚至文件。简而言之,隐写术的主要目的是隐藏任何文件(通常是图像、音频或视频)中的预期信息,而不实际改变文件的外观,即文件外观看起来和以前一样。
小白学视觉
2022/02/14
4K0
如何使用 Python 隐藏图像中的数据
JavaScript值延迟脚本和异步脚本
Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造。也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。但是有一种特殊情况,看如下代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charse
郑小超.
2018/01/24
8320
如何在 JavaScript 中处理 HTML 事件?
在Web开发中,JavaScript是一种常用的脚本语言,用于增强网页的交互性和动态性。HTML事件是用户与网页交互时发生的动作,如点击、鼠标移动、键盘输入等。本文将介绍如何在JavaScript中处理HTML事件,以实现更丰富的用户体验和交互功能。
海拥
2023/06/27
2820
如何在 JavaScript 中处理 HTML 事件?
隐藏在网站 CSS 中的窃密脚本
在过去的两年里,网络犯罪分子使用了各种各样的方法来在网上商城的各个地方隐藏针对Credit Card的信息窃取代码,以防止被安全检测方案所发现,而这些信息窃取代码也被称之为Web Skimmer或Magecart脚本。
FB客服
2021/01/25
8280
隐藏在网站 CSS 中的窃密脚本
shell脚本 从自定义的值中随机抽取+不重复
日期:2018/6/12 介绍:从数组里随机抽一个,但不会重复,相比之下python比较好做出效果
陈不成i
2021/06/24
3.3K0
Python脚本之根据excel统计表中字段值的缺失率实用案例
有时候,我们需要去连接数据库,然后统计下目标库表字段的值有多少个空值,并且计算出它的缺失率:
数据仓库践行者
2021/12/06
2.7K0
Python脚本之根据excel统计表中字段值的缺失率实用案例
从javascript脚本混淆说起
脚本病毒是一个一直以来就存在,且长期活跃着的一种与PE病毒完全不同的一类病毒类型,其制作的门槛低、混淆加密方式的千变万化,容易传播、容易躲避检测,不为广大网民熟知等诸多特性,都深深吸引着各色各样的恶意软件制作者 … 小到一个不起眼的lnk快捷方式,大到一个word文档,都是脚本的载体。本文主要以 js脚本为例(特指JScript,下同 ),具体结合实际样本,讲述混淆方式及其混淆类型检测相关知识,文章受限于样本个数及其种类,存在一定的局限性,但大致情况应当不会相差太大。本系列首先会对jscript及其脚本进行
FB客服
2018/02/28
1.5K0
从javascript脚本混淆说起
如何处理数据库表字段值中的特殊字符?
现网业务运行过程中,可能会遇到数据库表字段值包含特殊字符的场景,此场景虽然不常见,但只要一出现,其影响却往往是致命的,且排查难度较高,非常有必要了解一下。
披头
2020/11/20
4.8K0
问与答98:如何根据单元格中的值动态隐藏指定的行?
Q:我有一个工作表,在单元格B1中输入有数值,我想根据这个数值动态隐藏行2至行100。具体地说,就是在工作表中放置一个命令按钮,如果单元格B1中的数值是10时,当我单击这个命令按钮时,会显示前10行,即第2行至第11行;再次单击该按钮后,隐藏全部的行,即第2行至第100行;再单击该按钮,则又会显示第2行至第11行,又单击该按钮,隐藏第2行至第100行……也就是说,通过单击该按钮,重复显示第2行至第11行与隐藏第2行至第100行的操作。如图1所示。
fanjy
2021/03/12
6.4K0
EasyGBS平台如何更改token值的时效性?
EasyGBS国标视频云服务可支持通过国标GB28181协议将设备接入,实现视频的实时监控直播、录像、语音对讲、云存储、告警等功能,同时也支持将接入的视频流进行全终端、全平台分发,分发的视频流包括RTSP、RTMP、FLV、HLS、WebRTC等格式。平台部署简单,无需插件就能实现web浏览器播放,也支持手机浏览器、微信、PC等各种终端的无插件播放。
TSINGSEE青犀视频
2022/05/12
2.6K0
JAVASCRIPT 如何创建SEARCH字段
matinal
2023/10/14
1820
javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
许多项目不是从定义的结构开始, 而是随着时间的流逝而变化。例如, 一个基本博客可能从一开始就使用HTML格式将其内容存储在数据库中, 但是由于其简单性, 总有一天某人可能希望开始使用Markdown而不是HTML, 在这种情况下, 你需要从一种格式转换为另一种格式。如果你将服务器端逻辑与JavaScript(Node.js)一起使用, 甚至直接在浏览器中将HTML转换为编辑器中的Markdown, 则可以使用Turndown库轻松地完成此类任务, HTML到用JavaScript编写的Markdown转换器。
全栈程序员站长
2022/10/04
4K0
点击加载更多

相似问题

在linux机器上运行jar时UnauthorizedAccessException

20

GSON:运行jar文件时的MalformedJsonException (在Eclipse中工作正常)

20

在不同的机器/PC上运行jar文件

13

无法运行以前工作正常的.jar文件

11

Java JAR文件在本地机器上运行,而在其他机器上缺少文件

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文