Question

我正在使用html5和jquery mobile开发移动浏览器应用程序。我有一个小问题。我需要在移动浏览器中在页眉（浏览器（AD，页眉，内容和页脚））上显示广告。滚动时，标题应保持固定在顶部，广告和内容正文应滚动。

任何建议有什么想法吗？

谢谢

Answer 1

之类的东西？;

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

Answer 2

感谢您的支持。对于那些正在寻找答案的人。我现在有点工作了。在移动。它适用于Android和iPhone。

我在这里做的是。 OnScroll我正在寻找高度10.当它达到10时，标题（sticky-header）将位于屏幕顶部（如位置：固定），当页面到达顶部（0 px）时广告将是放置在顶部，标题将向下移动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");
        }


    }

谢谢

需要在移动浏览器中在标头上显示广告。滚动时，标题应保持固定，广告和内容正文应滚动

2 个答案: