2012-08-14 12 views
5

固定ヘッダーjQuery Mobileを取得できますか?下のリンクのように一番上に行が設定されていますか?固定ヘッダーjQuery Mobile

http://www.expedia.com.au/p/promos/Beach-Breaks.htm

あなたは、ヘッダー画像上記のリンクが上がると、ヘッダが来ると上に固定されたばかり表示された場合。 enter image description here

を上にスクロールした後 enter image description here

を上にスクロールする前に

私は上記のリンクのように固定ヘッダではなく、効果を得ることができることを利用しiScrollを試してみました。この問題に関するリンクやチュートリアルはありますか? お時間をいただきありがとうございました。

+0

が、これはあなたに良いスタートを与える [jqueryの携帯ヘッダーとフッターの固定を維持する方法] [1] [1]:http://stackoverflow.com/questions/4724068/どのようにしてjquery-mobile-header-and-footer-fixed – rahul

+0

@rahul:いいえ、違います。 – nhahtdh

+0

残念ながら、jQuery Mobileには上記の機能をそのままにすることはできません。 [固定ヘッダー](http://jsbin.com/iyowog/1/)(***ページのスクロールを行う***サイズ変更ウィンドウ)を持つことができますが、ページの途中から始まって固定されるものはありません。 – Jeemusu

答えて

2

オクラホマので、あなたは私はそれが私が働いているプロジェクトで便利になる可能性があるので、私はjQueryのモバイルでこれを実装する方法に疑問を抱いてしまいました。

JQuery Waypointsを使用すると、特定の要素がページの上端に当たったときと、その時点でページがスクロールしている方向を確認できます。ウェイポイントコードを使用すると、bodyタグを閉じる前に、ちょうどあなたのサイトの下でスクリプトを含め、非常に簡単です

http://jsbin.com/iyowog/3/edit

:私はあなたに可能な解決策を表示するには、次のjsbinを設定しています。プラグインを.waypoint()で初期化することができます。私の例では、あなたのスクロールダウン時にヘッダーを修正し、再び元のポイントを超えてスクロールして戻すときに固定する次のコードを使用しました。

$('#header').waypoint(function(event, direction) { 

    if (direction === 'down') { 
     $('#header').attr('data-position', 'fixed'); 
     $('#header').addClass('ui-header-fixed'); 

    } else { 
     $('#header').attr('data-position', ''); 
     $('#header').removeClass('ui-header-fixed'); 
    } 
}); 

最良の部分は、それが動的であるということです、ヘッダーがページ内にある場合、それは、ページの上部に当たっていたときに伝えることができるようになります重要ではありません。

1

このコードを試すことができます。これはうまくいくはずです。携帯電話のブラウザでテストしていないことに注意してください。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

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

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script> 
     $(document).on("pageshow","#page",function(){ 
      $(this).css("top","100px"); 
      $(".ui-header-fixed").css("position","absolute"); 
     }) 

     $(window).scroll(function(event){ 
      if($(window).scrollTop() >= 100){ 
       $(".ui-header-fixed").css("position","fixed"); 
      } 
      else{ 
       $(".ui-header-fixed").css("position","absolute"); 
      } 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
</head> 
<body> 
<div style="height:100px;background-color:#ccc"></div> 
<div data-role="page" id="page"> 

    <div data-role="header" data-position="fixed"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" style="height:1500px;">  
     <p>Lorem ipsum dolor</p>   
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html> 

ここでデモ - http://jsfiddle.net/Xg86Z/

関連する問題