jQueryのモバイル下部にナビゲーションバー

Question

私は問題を持っているし、本当にこの問題を解決する方法がわからない..私はこのような粘着性のフッターを持っている：

<!-- FOOTER ICON TABS -->   
      <div data-role="footer" data-position="fixed" data-tap-toggle="false">   
      <div class="footer" data-role="navbar"> 
       <ul> 
       <li> 
        <a href="#dashboard" data-icon="dashboard" class="ui-btn-active" id="icon-dashboard"> 
        <span class="navbar-text">Dashboard</span> 
        </a> 
       </li> 
       <li> 
        <a href="#" data-icon="progress" id="icon-progress"> 
        <span class="navbar-text">Voortgang</span> 
        </a> 
       </li> 
       <li> 
        <a href="#map" data-icon="security" id="icon-security"> 
        <span class="navbar-text">Plattegrond</span> 
        </a> 
       </li> 
       <li> 
        <a href="#" data-icon="security" id="icon-security"> 
        <span class="navbar-text">Securitycheck</span> 
        </a> 
       </li> 
       </ul> 
      </div> 
      </div> 

これにより、私はこのスタイルを設定します。

.ui-footer, .footer, .footer li, .footer a, .footer a:after { 
    background-color: transparent !important; 
    border-color: transparent !important; 
    height: 70px; 
} 

しかし、私のコンテンツがアイコンの後ろにあり、うまくないので迷惑です。これは次のようになります：

私はすでに白いブロックの高さを変更していますが、ブロックの高さが硬いわけではありません。これは、通知ブロックが動的で、内容が長さによって異なるためです。これにより、第2のブロックは折り畳み可能なブロックを有し、そこにはBoardingpassが書き込まれる。それは見てたか

：

をここでは、問題を再現FIDDLEです。私は誰かがこの上で私を助けることができる願っています:)

Answer 1

あなただけの下マージンを設定できますコードでも

#flight-info-block { 
    margin-bottom: 80px !important; 
} 

を、最後に同じ効果を達成するためにslideToggle関数の第三pa​​rametefを使用します

ところで

//open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
$content.slideToggle("slow", "swing", function() { 
    $("#flight-info-block").css("margin-bottom", "80px"); 
    $("#flight-info-block").trigger("updatelayout"); 
}); 

：アニメーションの私も透明な背景を嫌い、私はあなたのCSSの下部に次のルールを追加しました：

​​

とも取り外さあなた-350 scrollTopスプライトのオフセット：

$('html, body').animate({ 
    scrollTop: $header.offset().top 
}, 1000); 

あなたの更新フィドル：http://jsfiddle.net/yTt9b/1787/