Need to Display ads on top of Header in mobile browser. When it scrolls the header should stay fixed and the ads and the content body should scroll

StackOverflow https://stackoverflow.com/questions/11831626

Question

I am developing mobile browser app using html5 and jquery mobile. I have a small question. I Need to Display ads on top of Header(Browser(AD, Header, Content, and Footer)) in mobile browser. When it scrolls, the header should stay fixed at the top and the ads and the content body should scroll.

Any Suggestion Any idea?

Thank You

Was it helpful?

Solution 2

Thank you for your support. For those who are looking for answers. I got something working now. On Mobile. It works well both on Android and iPhone.

What i am doing here is. OnScroll i am looking for the height 10. When it reaches 10 then the header(sticky-header) will be on the top of the screen (like position:fixed) and when the page reaches the top (0 px) The ad will be placed in the top and the header will be moved 48px down.

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");
        }


    }

Thank You

OTHER TIPS

something like?;

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

​​​​​

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top