我正在制作这个 div 动画，其中 div 从顶部开始的原始位置为 70%，并且 div 是绝对的。 现在，当我点击按钮时，它会滑到页面底部，顶部为 95%。
现在我想检查这个位置是否在top:95%，如果是，那么我想把它滑回top:70%;
不知何故 Div 滑到 95% 但没有回来。我在这里做错了什么？？ 代码
CSS:-
#mainMenu {
width: 100%;
height: 30px;
background-color: black;
top: 70%;
position: absolute;
}
body {
margin: 0px;
}
#clickToCheck {
font-size: 22px;
}
JQuery
<script>
$(document).ready(function () {
$('#mainMenu').click(function () {
$("#mainMenu").animate({ top: "95%" }, 1100);
});
});
$(document).ready(function () {
$('#clickToCheck').click(function () {
if ($('#mainMenu').position().top === '95%') {
$("#mainMenu").delay(1000).animate({ top: "70%" }, 1200);
} else {
alert('its not at bottom');
}
});
});
和HTML
<body>
<span id="clickToCheck">Click to CHeck</span>
<div id="mainMenu"></div>
最佳答案
问题是函数
$('#mainMenu').position().top
将返回以像素为单位的值而不是百分比。因此，如果您想检查顶部是否为 95%，则必须根据顶部和窗口高度(或 div 高度)进行计算。这是代码:
$('#mainMenu').position().top/$(window).height()*100
此处您将获得#mainMenu 相对于整个窗口的百分比。如果#mainMenu 在 div 内，只需根据 div 的高度进行操作。另请注意，您可能会得到一个像 94.2343123 这样的数字。所以在检查的时候，我不会做和“if = 95”。我会做类似“if >= 93”之类的事情。
关于javascript - 动画 DIV 到页面底部，然后再次点击动画到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18404981/