jqueryモバイルヘッダーとフッターを固定する方法は？

Question

私はjQuery Mobileを使ってウェブサイトを作っています。

jqueryモバイルヘッダーとフッターを固定する方法は？私はちょうど（iPhoneアプリケーションで起こるように）コンテンツだけをスクロールし、ヘッダーとフッターを上下に固定しておきます。

提案がありますか？

Answer 1

あなたのヘッダー/フッターのdivにこの属性を追加します。

 <div data-role="header" data-position="fixed"> 
      <h1>Header Page 1</h1> 
     </div> 

また、あなたはこれを見ている可能性があります： http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Answer 2

を別のオプションは、iScrollをチェックアウトです：http://cubiq.org/iscroll

Answer 3

jquery mobileで修正した問題は、ヘッダーとフッターが消えてしまうことです。私はこれが将来的に修正されるだろうと思っていますが、Danによって提案されたiscrollに加えて、jquery mobile scrollviewとwink toolkitもあります。 http://jquerymobile.com/test/experiments/scrollview/

コード：https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

2）ウィンクツールキット

私は良いjQueryのモバイルscrollviewとの結果が、iscrollやウインク

• デモ

  1）jQueryのモバイルScrollviewと運を持っていました

  • チュートリアル：http://www.winktoolkit.org/tutorials/119/
  • デモ：http://www.winktoolkit.org/documentation/wink/ui/layout/scroller/test/test_scroller4.html?theme=default

Answer 4

もう一つの方法は、ページのdivタグにhttp://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html（jquery.mobile.scrollview.js、scrollview.js、およびeasing.js）を使用して= "true" をデータ・スクロールを置くことですここに示唆されるように：scrollview for jQuery mobile tollbars *not* to be fixed。

これまで私にとってはうまく働いていました。

乾杯、

E

Answer 5

使用iScroll v4の。ヘッダーとフッターを固定し、コンテンツのみをスクロールします。 iScrollにはラッパーDIVと子要素が必要です。下の例では、content_itemsはスクロールする項目を持つ子divです。私はあなたがdata-role = "content"とiScroll用のラッパーDIVを1つのHTML要素で結合できないことに気付きました！

<script type="text/javascript"> 
var myScroll; 

$(document).ready(function() { 

    myScroll = new iScroll('wrapper'); 

}); 

</script> 
<div data-role="page"> 
    <div id="header" data-role="header" data-position="fixed"></div> 
    <div id="content" data-role="content" class="contentcontainer contentsearched"> 
     <div id="wrapper"> 
      <div id="content_items" class="content_items"></div> 
     </div> 
    </div> 
    <div id="footer" data-role="footer" data-position="fixed"> 
     <div data-role="navbar"></div> 
    </div> 
</div> 

Answer 6

最新のjquery-mobileバージョン（1.1.0-rc）をお試しください。このバグが修正されました。

はiOSの6、7と8を探しhere

Answer 7

を持って、このハックは、問題を解決し、正しくiPod、iPhoneとiPadで（またはパネルなし）固定ヘッダを置き換えるために再描画をトリガするようです。注：私はiOSデバイスをテストし、その場合にのみこのイベントを追加します*。

if (iOS()) { 
    $(document).on('blur', 'input:not(:submit), select, textarea', function() { 
     var paddingBottom = parseFloat($(".ui-mobile-viewport, .ui-page-active").css("padding-bottom")); 
     $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", (paddingBottom + 1) + "px"); 
     window.setTimeout(function() { 
      $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", paddingBottom + "px"); 
     }, 0); 
    }); 
} 

* iOS用のテスト：

var iOS() = function() { 
    var userAgent = window.navigator.userAgent.toLowerCase(); 
    return (/iphone|ipad|ipod/).test(userAgent); 
} 

Answer 8

は、このツールバーの機能タイプを有効にするには、両方にデータフルスクリーン=「true」属性とデータ位置=「固定」属性を適用しますヘッダーとフッターのdiv要素。フレームワークは、コンテンツコンテナ（ui-content）の埋め込みも解除します。

<div data-role="header" data-position="fixed" data-fullscreen="true"> 
     <h1>Header Page 1</h1> 
    </div>