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

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

Answer 1

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