Question

I have a site on Google App engine written in python/django/html. Site is located at http://perlesloyfer.no
Its a kind of blog that shows some images of people with a kind of bows i make. I have implemented a “sticky header” at the top, and im showing ads in the 9th position of the posts. But when i scroll the list the Google Ads are somehow forcing them self to be on top of the header. Image of this is in the bottom of the question.

What causes this, and is it possible to fix it? I want the ad to scroll like the other posts, but it should not show as it is “over” the header when its at that position.

Sticky header jquery code:

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#sticky').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
            $('#sticky').addClass("sticky");
        } else {
            $('#sticky').removeClass("sticky");
        }
    });
});

Actual HTML for the header:

<div id="sticky" class="top-area">
<div class="main-header"><a href="./">Perlesløyfer</a></div>
<div class="main-subheader"><p>Av Håkon Bogen</p></div>
<div class="tabs">
    <ul>
        <li><a href=".">Bilder</li></a>
        <li><a class="selected" href="./about">Om</li></a>
        <li><a href="http://epla.no/handlaget/produkter/526979/">Kjøp</li></a>
        <li><a href="./submit">Last opp</li></a>
    </ul>
</div>

CSS for sticky:

#sticky {
    background-color: white;
    position:fixed;
    top:0;
    width:100%;
}

Google Ad code:

<div class="commercial" id="page-wrap-ad">
    <p id="ads">
<!---  google_ad_client = ....  -->
<script type="text/javascript">
    <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></p>

Answer 1

Just added a greater z-index to the sticky header. Wasn’t harder than that.

#sticky {
    background-color: white;
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
}