2012-01-19 12 views
3

私はphonegapとjqmを使って簡単なアプリケーションを開発しています 私の問題は、ページの上部または下部に達するとフッタとヘッダーがスクロールできることです。jQuery Mobileはヘッダーとフッターをスクロールします(固定ツールバー?)

私はページの上部にあるんだ、と私は上にスクロールした場合、ヘッダがスクロールされます - フッタのために同じ(提供された画像を参照してください)

私はiScrollを試みたが、それは何を修正didntの。 bodyのオーバーフローをhiddenに設定し、.ui-content divのオーバーフローをscroll-didntに設定することで、jqm CSS設定をオーバーライドしようとしました。

また、身体の位置を固定に設定しようとしました。それから私がスクロールすると、体は動かずに黒い画面が下から上がってページを隠してしまった。

アイデア?

enter image description here

+1

私のために正常に動作し、私はあなたがその画像内に記述しているものの例を見ることができない.... – Jivings

+0

「SSS」はjqueryのモバイルヘッダ(データ内容は=「ヘッダ」)を表し、 私は画面をタップし、指を下に動かして(スクロールアップ)、ヘッダーを含めてページ全体が移動しました。 私はすでにこのページの一番上にいたので、これをしたときに何も起こらなかったはずです。 –

+0

ああ、私は参照してください。そのiPhoneは特定ですか?私はこれまでに私に起こったことはありませんでした。 – Jivings

答えて

0

私の場合、iScrollは役に立ちませんでした。

<div data-role="header" class="basic-top" data-position="fixed" data-tap-toggle="false" data-transition="none"> 

と長い時間が、良いコードを見つけるための方法を見つけるために、ページの下部を認識し、そしてロードすることがあった。私はそれがこのようなものですので、私は、JQMの途中でそれを修正し、ヘッダを修正しましたより多くのコンテンツ。

は、最後に私はこれを使用:

$(window).scroll(function() { 
    if($(window).scrollTop() + window.innerHeight == $(document).height()) { 
    NameFunctionWhatCallsAjax(); 
    } 
}); 

をそして私は、私のヘッダにこれを置く:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

それはあまりにもiPhoneやその他のモバイルデバイス上で動作します。 私もそれがあなたのために働くことを願っています。

0

こんにちは、あなたのヘッダーとフッターのタグを追加して、iscrollとiscrollviewプラグインを使用してください。その

data-position="fixed" data-tap-toggle="false" 
関連する問題