是否有办法使按钮在向下滚动时褪色？
提问于 2022-08-25 17:35:49
我有一个弹跳向下箭头在我的网站屏幕底部(按钮部分还没有完成，但视觉部分在那里)，停留在相同的地方，当你向下滚动页面。
这是按钮的代码：
@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;
}<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中向下滚动页面时，是否有办法使箭头淡出？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-08-26 02:48:46
为了添加@的答案，这个答案很好，但只是“隐藏”和“显示”箭头而不是褪色，我对代码做了一些修改。
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;
}
});@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;
}<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>
Stack Overflow用户
发布于 2022-08-25 18:54:07
当存在滚动事件时，您可以收听window.onscroll来侦听您所处的偏移位置。下面是使用javascript向下滚动以隐藏图像的解决方案：
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。这里还有示例代码的链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73495257
复制相关文章
![如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]](https://ask.qcloudimg.com/http-save/yehe-1120945/wb8lkulm9p.jpeg)
点击加载更多
腾讯云开发者
