Question

我正在使用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

由于

Answer 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"});
    }
}

Answer 2

问题可能是这一行

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

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

if (position.top == -55)

或者变得更加防守

if (position.top < 0)

Answer 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;
    }

可能有帮助

获得并设置最高职位

3 个答案: