个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
<!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>
如何在滚动页面时滑入和滑出按钮。滑入工作正常滑出不工作。
最佳答案
你应该为btn添加动画
CSS
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}
关于javascript - 页面滚动时滑入和滑出按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60169083/
26
4
0
我希望单击菜单项时，div 将从右向左滑动，然后打开关闭选项(滑回到右侧) 例如:http://www.cortac.com/ 有什么想法、演示链接等可以实现这一点吗？ 我发现这个与上面的很接近，但不
使用 jQuery 效果，我有一个层，其中包含一组 HTML(显示效果很好)。 单击按钮时，它会滑出 ($n).show('blind', { direction: left }, 1000); 这
我有三列，我希望外部两列在刷新时平滑滑出，然后当鼠标进入左/右边缘时，特定列滑回。 这是 fiddle :https://jsfiddle.net/3362xu89/ 这是 jQuery 代码: va
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this q
CSS #overlay{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; backgro
我正在尝试制作一个简单的响应式网页，将水平菜单导航转变为移动设备的滑入式侧面板。我取得了很大进步，但我不确定如何始终(在窄屏幕上)保持选项卡触发器可见。如果我将定位设置为“固定”，则选项卡触发器不会随
所以，我目前正在一个网站上练习网络开发，但遇到了一些小问题。我希望能够单击图像“搜索图标”，然后让我的文本字段滑出，它确实如此，但它没有聚焦并准备好供用户输入。当我添加焦点事件时它起作用了，但它失去了
我在显示和隐藏文本框时遇到问题。 您可以在以下位置看到它的工作:http://jsfiddle.net/CVPSg/ 问题: 我要点击About并显示 来自屏幕左侧(显示:无) 然后，我要关闭与 Cl
滑出没问题我唯一的问题是滑入没有出现，我认为它没有捕捉到他们的第一个 IF 宽度等于 0px。抱歉，我对 jQuery 真的一窍不通。 代码: $(document).ready(function
这个问题涉及如何滑出一个 div，现在可以正常工作了。 但是——我早该预见到这一点——div 在相对于页面左上角的位置滑出。我将我的正文标签设置为 1200 像素(更改它不是我需要的布局的选项)。我需
我正在尝试让灰色面板滑出。我希望在其他彩色面板滑入之前单击“目标 1”或“目标 2”或“目标 3”时整个 div(灰色背景)滑出。然后当您单击“主菜单链接”时在灰色面板滑入之前，整个彩色面板应该滑出(
我正在尝试编写一个与图像类似的滑动菜单:https://chustynka.pl/ 我已经有了随时间变化的组件(带有箭头)，唯一剩下的就是动画。我添加了有用的类和 ID，但我不知道如何使用 css 为
我有一个 div，我想使用 .show("slide", { direction: "left"}, 1000); 幻灯片显示效果很好，我遇到的问题是滑出 div 的顶部有上边距，但在 div 完全显
我是编码新手，需要 jQuery 方面的帮助。我有 2 s(一个带有图像，另一个带有菜单列表，均为 50% 宽度)，我需要能够单击其中一个菜单选项以使新的 div(50% 宽度)从右侧出现，同时缩小
我正在尝试使用 Transition + Transition 管理器将此 View 滑入和滑出，但是当点击隐藏按钮使 View GONE 时，它没有滑动动画。然而，显示按钮确实有滑动动画使 View
我有一个可以根据需要打开和关闭的内容 div，但我无法让内容 div 从底部滑入或滑出。我尝试使用 css 但我认为它的固定位置让我悲伤。默认情况下它应该是隐藏的，但默认情况下它会显示 $(".liv
我正在做一个标签式导航，这里是一个 example .现在，contens slidesUp/Down 但我希望它只是消失/出现。有什么想法吗？ // When the document load
是否可以从屏幕上移除 View ？安卓 例如我有一些布局，其中包含3个布局； layout_1 layout_2 layout_3 是否可以点击 layout_1 并将其从屏幕上移开，您将收到可见 l
有人问我如何将 Canvas 导航菜单滑出 Lanyon来自 Jekyll 的 Poole 系列。我最初是从 this Scotch.io tutorial 学习如何制作 Canvas 外导航的。 ，
请参阅this link html btn 1 btn 2 btn 3 btn 4 CSS #slideout { background: #666; position
我是一名优秀的程序员,十分优秀！