0

我正在制作这个 div 动画，其中 div 从顶部开始的原始位置是 70%，并且 div 是绝对的。现在，当我单击按钮时，它会以 top:95% 滑动到页面底部。

现在我想检查位置是否是顶部：95％，如果是，那么我想将它滑回顶部：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>

4

2 回答 2

2

问题是函数

$('#mainMenu').position().top

将返回以像素而不是百分比为单位的值。因此，如果您想检查顶部是否为 95%，则必须根据顶部和窗口高度（或 div 高度）进行数学运算。这是代码：

$('#mainMenu').position().top/$(window).height()*100

在这里，您将获得#mainMenu 相对于整个窗口的百分比。如果 #mainMenu 在 div 内，只需根据 div 的高度进行操作。另请注意，您可能会得到像 94.2343123 这样的数字。所以在检查时，我不会做和“if = 95”。我会做类似“if >= 93”之类的事情。

于 2013-08-23T14:41:05.010 回答
0

基本问题是.position(),.offset()和.css()默认情况下都以像素为单位。

一个合理的解决方法是使用.data()存储菜单的原始.offset( )并检查其偏移量是否已更改，如下所示：

工作示例

$(document).ready(function () {
    $('#mainMenu').data('startPos', $('#mainMenu').offset().top); // when the doc is ready store the original offset top.
    $('#mainMenu').click(function () {

        $("#mainMenu").animate({
            top: "95%"
        }, 1100);
    });

    $('#clickToCheck').click(function () {
        if ($('#mainMenu').offset().top > $('#mainMenu').data('startPos')) { // if new offset is greater than original offset 
            $("#mainMenu").delay(1000).animate({
                top: '70%'
            }, 1200);
        } else {
            alert('its not at bottom');
        }
    });
});
于 2013-08-23T14:50:49.203 回答