Google pubads appear and then disappear

Question

I'm using Google pubads on http://development-client-server.com/ds/ which is working great, until you get to the actual story page (see http://development-client-server.com/ds/speech-more-common-autism/), when the right top sidebar ad will load and then disappear quickly.

I've narrowed it down to the stickySidebars function I'm using to stick both the social media bar on the left and the jobs listing div on the right (beneath where the Google ad is). However, the sticky function shouldn't affect the Google ad at all?

Here's the JS function I'm using, which I've already rewritten several times (and have tried to talk the clients out of using already).

<script>

// Sticky Sidebars

function stickySidebars() {   

    var length = $('.post-content').height() - $('article .sharing-links').height() + $('.post-content').offset().top;
    var lengthSidebar = $('.sticky-container').height() - $('aside .job-listings').height() + $('.sticky-container').offset().top -30;

    $(window).scroll(function () {

        // Sharing Links

        var scroll = $(this).scrollTop() + 90;
        var height = $('article .sharing-links').height() + 'px';

        if (scroll < $('.post-content').offset().top) {

            $('article .sharing-links').css({
                'position': 'absolute',
                'top': 'auto',
                'bottom': 'auto'
            });

        } else if (scroll > length) {

            $('article .sharing-links').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('article .sharing-links').css({
                'position': 'fixed',
                'top': '90px',
                'height': height
            });

        }

        // Sidebar

        var heightSidebar = $('aside .job-listings').height() + 'px';

        if (scroll < $('aside .job-listings').offset().top) {

            $('aside .job-listings').css({
                'position': 'absolute',
                'top': '300px',
                'bottom': 'auto'
            });

        } else if (scroll > lengthSidebar) {

            $('aside .job-listings').css({
                'position': 'absolute',
                'bottom': '30px',
                'top': 'auto'
            });

        } else {

            if (scroll < $('.sticky-container').offset().top + 300) {

                $('aside .job-listings').css({
                    'position': 'absolute',
                    'top': '300px',
                    'bottom': 'auto'
                });

            } else {

                $('aside .job-listings').css({
                    'position': 'fixed',
                    'top': '90px',
                    'height': heightSidebar
                });
            }

        }
    });
}

$(window).on('load',function(){
    if($(window).width() > 1100){
        stickySidebars();
    } 
});

$(window).resize(function() {
    if($(window).width() > 1100){
        stickySidebars();
    }
});
</script>

Answer 1

The issue is not caused by the sticky sidebar. It is caused by this bit of code:

$(window).on('load',function(){
    // Other unrelated functions here...

    /*****************************/
    // Move Sidebar in Mobile
    /*****************************/

    if($(window).width() <= 980){
        $("aside").appendTo(".mobile-sidebar");
    } else {
        $("aside").insertAfter(".single-article article");
    }
});

Essentially the ad loads and then you move the container (the aside), which causes the ad to disappear.

There are a few different options, but essentially you either need the Google ad script to run after that piece of code or you need to refresh the ads. To refresh the ads you should be able to run this line of code straight after your if else statement:

googletag.pubads().refresh()

This refreshes all of the ads. Depending on how you have it setup you can pass in a variable to refresh() so that a specific ad is refreshed e.g.

var slot1 = googletag.pubads().display('/1234567/sports', [728, 90], 'div-1');

googletag.pubads().refresh([slot1]);

Google Reference Docs for refresh()