获取和设置顶部位置答案

【问题标题】：Get and set top position获取和设置顶部位置
【发布时间】：2013-01-03 11:57:52
【问题描述】：

我正在使用hammer.js 制作一个基本的触摸友好型移动网站。我隐藏了顶部位置为负的顶部菜单，双击后它将使用 css3 过渡出现。但是我希望它在第二次双击时再次隐藏。

我尝试使用if/else 调用顶部位置，然后相应地重新设置它，但我无法让它工作，有人知道我哪里出错了吗？

var t = $("#topbar");
var position = t.position();

$sw.on('doubletap', function(event) {
    event.preventDefault();
    if (position.top == '-55px') {
        $('#topbar').css("top", "0");
    }
    else {
        $('#topbar').css("top", "-55px")
    }
});

网站地址是http://www.bettondesignwork.co.uk/tim/mobile

谢谢

【问题讨论】：

我是否遗漏了什么或者position = t.position() 应该在事件处理程序中而不是在它之外？

标签： javascript jquery hammer.js

【解决方案1】：

你可以试试这个：

var t = $("#topbar");
var position = t.offset();

$sw.on('doubletap', function(event) {
    event.preventDefault();
    if (position.top == '-55px') {
        $("#topbar").offset({ top: "0"});
    }
    else {
        $('#topbar').offset({ top: "-55px"});
    }
}

【讨论】：

这解决了我的第一个问题，整个事情都不起作用所以非常感谢你，但是一旦菜单出现，第二次双击以再次隐藏它没有任何作用？
@TimWilkinson 检查@sawe 的答案。此外，您可以将console.log( position.top ); 放入您的事件中，以检查给定时间的值是什么（以及它是如何呈现的）。当然，您可能希望将其更改为单击事件以在桌面上进行测试。
它被设置为将鼠标点击识别为浏览器测试的触摸事件。仍然无法让菜单再次隐藏。有没有办法在每个脚本运行后重置变量？
@TimWilkinson 我只是在写这个，但不能再编辑我的评论了。虽然能够更新我的链接，但如果您还没有看到 v2（在您的评论上方），请检查一下。您的 position 变量在事件之外。因此，如果您将变量放在事件中，它会在每次触发事件时检查偏移量。

【解决方案2】：

问题可能出在这一行

if (position.top == '-55px')

如果我没记错的话，.top 属性是数字，所以你可以将代码更改为

if (position.top == -55)

或者变得更具防御性

if (position.top < 0)

【讨论】：

【解决方案3】：

获取一个 HTMLElement

的顶部位置

   function getHTMLElementTop(thisNode, Top)
    {
            if (Top == undefined)
            {
                var Top = 0;
            }
            if (thisNode.nodeType == 1)
            {
                Top += thisNode.offsetTop;
                //if (thisNode.parentNode)
                if (thisNode.offsetParent)
                {
                    Top = getHTMLElementTop(thisNode.offsetParent, Top);
                }
            }
            return Top;
    }

可能有帮助

【讨论】：