需要在移動瀏覽器的標題頂部展示廣告。當它滾動標題應保持不變，廣告和內容主體應滾動

我正在開發使用html5和jquery mobile的移動瀏覽器應用程序。我有一個小問題。我需要在移動瀏覽器中的標題（瀏覽器（AD，標題，內容和頁腳））之上顯示廣告。滾動時，標題應保持固定在頂部，廣告和內容主體應滾動。需要在移動瀏覽器的標題頂部展示廣告。當它滾動標題應保持不變，廣告和內容主體應滾動

任何意見任何想法？

謝謝

來源

2012-08-06 dhiku

在桌面上時，你通常會使用位置：固定的一點，但它無法在移動瀏覽器上運行。這會有所幫助：http://bradfrostweb.com/blog/mobile/fixed-position/？ – 2012-08-06 15:59:54

謝謝您的支持。對於那些正在尋找答案的人。我現在有一些工作。在移動。它在Android和iPhone上運行良好。

我在這裏做的是。 OnScroll我正在尋找高度10.當它達到10時，標題（sticky-header）將位於屏幕的頂部（比如position：fixed），當頁面到達頂部（0px）時，廣告將會放置在頂部，標題將向下移動48px。

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-08 14:21:21 dhiku

像?;

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

來源

2012-08-06 18:58:41

謝謝聖地亞哥。但我需要頂部的廣告。這將在滾動時消失。（廣告，標題，內容，頁腳） - 標題已修復。休息一切卷軸。 – dhiku 2012-08-06 21:17:07

在上面的代碼中，overflow-y：scroll;在第二個div不工作？我的意思是，你可以用屏幕的總高度創建兩個div，其中一個是廣告高度，另一個是overflow-y：scroll，以及其中的所有內容。 – 2012-08-06 21:40:19

需要在移動瀏覽器的標題頂部展示廣告。當它滾動標題應保持不變，廣告和內容主體應滾動

回答

相關問題