jquery - A が B の上にある場合のドキュメントの幅 B が非表示の場合

Question

http://jsbin.com/iZILATE/1/edit

JQuery Mobile のヘッダーにボタンがあります。アンカーが見出し要素の上に表示されている場合にのみ、見出し (h1) を非表示にしたいと考えています。たとえば、解像度が低いか、ビューを横向きから縦向きに変更しています。

HTML

<div class="header ui-bar-c" id="head1" data-role='header'>
    <div id="gentags" class="ui-btn-left">
        <a id="htmltag" data-role="button" data-inline="true" data-mini="true">&lt;&gt;&lt;/&gt;</a>
        <a id="csstag1" data-role="button" data-inline="true" data-mini="true">{}</a>
        <a id="colon" data-role="button" data-inline="true" data-mini="true">:</a>
        <a id="semicolon" data-role="button" data-inline="true" data-mini="true">;</a>
        <a id="csstag2" data-role="button" data-inline="true" data-mini="true">:;</a>
        <a id="jstag1" data-role="button" data-inline="true" data-mini="true">()</a>
        <a id="jstag2" data-role="button" data-inline="true" data-mini="true">("")</a>
        <a id="function" data-role="button" data-inline="true" data-mini="true">function(){}</a>
    </div>

    <h1>Text Website Name</h1>
    <a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true" class="ui-btn-right">Bars</a>
</div>