Question

我正在研究这个div动画，其中div的原始位置是70％而div是绝对的。现在，当我点击按钮时，它会滑到页面底部，顶部为：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>

Answer 1

问题在于功能

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

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

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

在这里，您将获得与完整窗口相关的#mainMenu百分比。如果#mainMenu在div中，只需根据div的高度进行操作。还要注意你可能会得到像94.2343123这样的数字。因此，在检查时，我不会这样做，“if = 95”。我会做类似“if＆gt; = 93”之类的东西。

Answer 2

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

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

<强> Working Example

$(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');
        }
    });
});

将DIV设置为页面底部，然后再次点击动画再次设置为Top

2 个答案: