Fatal编程技术网
  • javascript/
  • Javascript 需要在手机浏览器的页眉顶部显示广告。当它滚动时，标题应保持固定，广告和内容正文应滚动

Javascript 需要在手机浏览器的页眉顶部显示广告。当它滚动时，标题应保持固定，广告和内容正文应滚动

javascript jquery html jquery-mobile

Javascript 需要在手机浏览器的页眉顶部显示广告。当它滚动时，标题应保持固定，广告和内容正文应滚动,javascript,jquery,html,jquery-mobile,mobile-browser,Javascript,Jquery,Html,Jquery Mobile,Mobile Browser,我正在使用html5和jquery mobile开发移动浏览器应用程序。我有一个小问题。我需要在手机浏览器的页眉顶部（浏览器（广告、页眉、内容和页脚））显示广告。当它滚动时，标题应该固定在顶部，广告和内容体应该滚动 有什么建议吗 谢谢你像什么 <html> <head> <style type='text/css'> #uno{ background-color:yellow

我正在使用html5和jquery mobile开发移动浏览器应用程序。我有一个小问题。我需要在手机浏览器的页眉顶部（浏览器（广告、页眉、内容和页脚））显示广告。当它滚动时，标题应该固定在顶部，广告和内容体应该滚动

有什么建议吗

谢谢你

像什么

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


#乌诺{
背景颜色：黄色；
位置：绝对位置；
宽度：320px；
高度：150像素；
}
#dos{
位置：绝对位置；
宽度：320px；
高度：250px；
边缘顶部：50px；
溢出y：滚动；
背景颜色：蓝色；
}
“如果你是我的朋友，那你就是我的朋友。”

“如果你是我的朋友，那你就是我的朋友。”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，我的责任，我的责任……”
“这是我的责任，我的责任，我的责任……”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，我的责任，我的责任……”
“这是我的责任，我的责任，我的责任……”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，我的责任，我的责任……”
“这是我的责任，我的责任，我的责任……”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，我的责任，我的责任……”
“这是我的责任，我的责任，我的责任……”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，我的责任，我的责任……”
“这是我的责任，我的责任，我的责任……”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，我的责任，我的责任……”
“这是我的责任，我的责任，我的责任……”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任……”
​​​​​

谢谢您的支持。对于那些正在寻找答案的人。我现在有些东西在工作。在手机上。它在Android和iPhone上都运行良好

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


    }

window.onscroll=函数（）{
如果（window.innerHeight>window.innerWidth）{
var值=$（this.scrollTop（）；
如果（值>10）{
//$（“#sticky header”）.fixedtoolbar（{visibleOnPageShow:false}）；
$（“#sticky header”）.fixedtoolbar（{tapttoggle:false}）.css（“top”，“0px”）；
$（“#ad1”）.hide（）；
}
否则如果（值<10）{
$（“#ad1”）.show（）；
$（“#ad1”）.fixedtoolbar（{taptokle:false}）.css（“top”，“0px”）；
$（“#sticky header”）.fixedtoolbar（{tapttoggle:false}）.css（“top”，“48px”）；
}
}
if（window.innerWidth>window.innerHeight）{
$（“#sticky header”）.fixedtoolbar（{tapttoggle:false}）.css（“top”，“0px”）；
}
}
谢谢

在桌面上，您通常会使用position:fixed，但在移动浏览器上不起作用。这有帮助吗：？谢谢你，圣地亚哥。但我需要上面的广告。在滚动时，这些信息将消失。（广告、页眉、内容、页脚）-页眉是固定的。静止一切滚动。在代码上方溢出-y:滚动；在第二个分区中不起作用？我的意思是，你可以用屏幕的总高度创建两个div，一个是广告高度，另一个是用overflow-y:scroll固定在下面，所有的内容都应该是这样