Jquery 移动隐藏 Header

Question

如果 window 高度小于宽度，我有一个隐藏 header 的页面，这是我的代码。

if ($(window).width()> $(window).height()){
$("#header").hide();
}

这是输出

如您所见，header 被隐藏，但 space header 未被删除。我的问题是如何在隐藏 header 后删除 space?

Answer 1

那是因为你的 header

中有 data-position="fixed"

所以您需要将 margin-top css 添加到您的内容到 header 的高度，以便它向上移动。你可以动态地做到这一点。调整大小后，您可以将边距重置为 0px

演示

http://jsfiddle.net/scrva2hz/

Jquery

var headheight = $("#header").height();

$(window).on('resize', function(){
if ($(window).width()> $(window).height()){
$("#header").hide();
$(".ui-content").css("margin-top", "-"+headheight+"px");
}
else {
$("#header").show();
$(".ui-content").css("margin-top","0px");   
}
});

Jquery 移动隐藏 Header

Jquery Mobile hide Header

jquery-mobile