滑入和滑出頁面滾動按鈕
[英]Slide in and slide out a button on page scroll
問題描述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container{
height: 2000px;
background:green;
padding:10px;
}
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
}
.slideIn{
animation: 600ms ease-in 0s slideIn;
animation-fill-mode: forwards;
}
.slideOut{
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}
@keyframes slideIn {
from{
right:-50%;
}
to{
right:0%;
}
}
@keyframes slideOut {
from{
right:0%;
}
to{
right:-50%;
}
}
</style>
</head>
<body>
<div id="container" class="container">
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
<div id="someEle" style="height: 200px;background:blue;"></div>
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
</div>
<button id="btn" class="btn">GET API ACCESS</button>
<script>
function init(){
var parent = document.getElementById("container");
window.addEventListener('scroll',function(e){
var parentScrollHeight = parent.scrollHeight;
var parentScrollTop = document.documentElement.scrollTop;
var startPoint = (parentScrollHeight/100) * 10;
var endPoint = (parentScrollHeight/100) * 70;
console.log(parentScrollTop,startPoint,endPoint)
try{
var ele = document.getElementById("btn");
if(parentScrollTop > startPoint && parentScrollTop < endPoint){
console.log("added")
ele.classList.add("slideIn");
}else{
console.log("removed");
ele.classList.remove("slideIn");
}
}catch(e){
console.log(e);
}
});
}
init();
</script>
</body>
</html>
如何在滾動頁面時滑入和滑出按鈕。 滑入正常，滑出不工作。
1 個解決方案
解決方案1
1 已采納 2020-02-11 12:49:43
你應該為 btn 添加 animation
css
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}
jQuery 按鈕在滾動時滑入和滑出
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.