jQuery移动标头切割内容

Question

我正在从事一个jQuery移动项目，我想在其中使用全屏标题data-position="fixed" data-fullscreen="true"。我遇到的问题是标题正在切入内容。

我正在尝试找出一种通过标头运动进行内容移动的方法。因此，当可见标题时，内容将被推下，以免被切断，而当标头不可见时，将内容推到以最大程度地减少空白。

据我所知，这样做的唯一方法是使用数据杆content动态更改DIV的margin-top CSS规则。我认为这很容易，但这不是。

这是我的html：

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed" data-fullscreen="true" id='header'>Some Header Stuff</div>
    <div data-role="content" id="content">Some Content Stuff</div>
    <div data-role="footer" data-position="fixed" data-fullscreen="true">Some Footer Stuff</div>
</div>

到目前为止，我已经尝试了以下jQuery解决方案，没有运气：

jQuery(document).on('pagecreate', function () {
    $("#content").css('margin-top', $('#header').height());
});

和

$(document).on('pageshow', '#index',function(e,data){   
    $('#content').height(getRealContentHeight()); 
});
function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();
    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

这两种解决方案都试图捕获标头的高度属性，并且我可以从data-position="fixed" data-fullscreen="true"设置的标题中告诉标头，总是显示0。

我已经看到了其他解决方案，例如添加一堆<br/>标签或添加一个空的DIV。当不可见标头时，这些解决方案都可以保持空白空间。有人知道如何根据可见的标头实际上使标题上下切换内容吗？

Answer 1

很棒的解决方案

$(document).on('pageshow', function () {
    $("#content").css('margin-top', $('#header').height());
});
$(document).on('vmouseup', '#index',function () {
    setTimeout(function() {
        $("#content").css('margin-top', $('#header').height());
    }, 300);    
});

上面的代码设置了pagecreate上内容的边距，并在用户单击通常折叠标头的任何地方时重新设置边距。