0

html5とjquerymobileを使用してモバイルブラウザアプリを開発しています。ちょっとした質問があります。モバイルブラウザのヘッダー（ブラウザ（AD、ヘッダー、コンテンツ、フッター））の上に広告を表示する必要があります。スクロールするときは、ヘッダーが上部に固定され、広告とコンテンツ本文がスクロールする必要があります。

何か提案はありますか？

ありがとうございました

4

2 に答える 2

0

何かのようなもの？;

<html>
    <head>
        <style type='text/css'>   
            #uno{
                background-color:yellow;
                position:absolute;
                width:320px;
                height:150px;            
        }
            #dos{
               position:absolute;
               width:320px;
               height:250px; 
               margin-top:50px;
               overflow-y:scroll;
               background-color:blue;            
        }
    </style>
</head>
<body>
    <div id='uno'><p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p></div>

    <div id='dos'> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p><p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>  </div>

</body>

</ p>

于 2012-08-06T18:58:41.980 に答える
0

ご支援いただきありがとうございます。答えを探している人のために。私は今何かが機能している。モバイルで。AndroidとiPhoneの両方でうまく機能します。

私がここでやっていることはです。OnScroll私は高さ10を探しています。10に達すると、ヘッダー（sticky-header）が画面の上部に表示され（position：fixedなど）、ページが上部に到達すると（0 px）、広告は次のようになります。上部に配置すると、ヘッダーが48ピクセル下に移動します。

window.onscroll=function (){
       if (window.innerHeight > window.innerWidth) {
        var value = $(this).scrollTop();
        if ( value > 10 ) {
                //$("#sticky-header").fixedtoolbar({ visibleOnPageShow: false });
            $("#sticky-header").fixedtoolbar({ tapToggle: false }).css("top","0px");
            $("#ad1").hide();
            }
        else if(value < 10){
            $("#ad1").show();
            $("#ad1").fixedtoolbar({ tapToggle: false }).css("top","0px");
            $("#sticky-header").fixedtoolbar({ tapToggle: false }).css("top","48px");
        }
       }

        if (window.innerWidth > window.innerHeight) {
        $("#sticky-header").fixedtoolbar({ tapToggle: false }).css("top","0px");
        }


    }

ありがとうございました

于 2012-08-08T14:21:21.137 に答える