我有一个弹跳向下箭头在我的网站屏幕底部(按钮部分还没有完成,但视觉部分在那里),停留在相同的地方,当你向下滚动页面。
这是按钮的代码:
@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中向下滚动页面时,是否有办法使箭头淡出?
谢谢
发布于 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>
发布于 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。这里还有示例代码的链接。
https://stackoverflow.com/questions/73495257
复制