4

以下のリンクのように行が上部に設定された固定ヘッダーjQueryMobileを取得することは可能ですか？

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

上のリンクが表示されている場合は、ヘッダー画像が上に表示され、ヘッダーが表示されて上部に固定されます。

上にスクロールする前に ここに画像の説明を入力してください

上にスクロールした後 ここに画像の説明を入力してください

固定ヘッダーを取得できるが、上記のリンクのような効果は得られないことを使用してiScrollを試しました。この問題に関するリンクやチュートリアルはありますか？お手数をおかけしますが、よろしくお願いいたします。

4

2 に答える 2

3

さて、私が取り組んでいるプロジェクトで役立つ可能性があるため、jQuery Mobile でこれを実装する方法について疑問に思いました。

JQuery Waypointsを使用すると、特定の要素がページの上部に到達したときと、その瞬間にページがスクロールしていた方向を確認できます。可能な解決策を示すために、次の jsbin をセットアップしました。

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

ウェイポイント コードは非常に単純です。body タグを閉じる前に、サイトの下部にスクリプトを含めるだけです。その後、プラグインを で初期化できます.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');
   }
});

最良の部分は、ヘッダーがページ内のどこにあるかに関係なく、動的であることです。ヘッダーがページの上部に到達したときに通知できます。

于 2012-08-14T06:07:20.790 に答える
2

このコードを試すことができます。これは機能するはずです。携帯電話のブラウザでテストしていないことに注意してください。役立つかどうか教えてください。

<!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/

于 2012-08-14T06:05:32.760 に答える