Michael

Навскидку, вариант на jQuery:

<div id="banner"></div> // кладем в конец страницы.

#banner {
    z-index: 10; // корректируем по ситуации  
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none; // скрываем по умолчанию    
}

function BannerManager() {
    var $banner = $('#banner');
    var $viewport = $(window);
    update();  // обновляем состояние баннера по инициализации

    $viewport.on({
        'scroll': update,   // обновляем состояние баннера по скроллу
        'resize': update  // обновляем состояние баннера по изменению размера окна
    })

    // кроссбраузерно получаем высоту страницы
    function getDocHeight() { 
        var D = document;
        return Math.max(
            D.body.scrollHeight, D.documentElement.scrollHeight,
            D.body.offsetHeight, D.documentElement.offsetHeight,
            D.body.clientHeight, D.documentElement.clientHeight
        );
    }

    function update() {
         if ($viewport.scrollTop() + $viewport.height() >= getDocHeight() / 2) {
            $banner.css('display', 'block');
         } else {
            $banner.css('display', 'none');
         }
   }
}

new BannerManager();

контент записи в FB имеет примерно одинаковую структуру. По скроллу всегда сначала выводится грузится заглушка, одновременно - уходит асинхронный запрос на сервер. По ответу сервера на место заглушки подсовывается контент

Если Вам к тому же надо сбрасывать active класс с других элементов по клику, а также используется jQuery на проекте, то:

var $els = $('.vloading'); // кэшируем ссылку на объекты
$els.on('click', function() {
   $els.removeClass('active');
   $(this).addClass('active');
})

Если я правильно вас понимаю:
1. Проблему смещений можно решить развешиванием на блоки общего класса, который и будет отвечать за смещение. .myClass { margin-top: - 100px; }
2. Вопрос с z-index'ом вы не решите "автоматически" никак. Откуда браузер будет знать, какой вы блок захотели положить выше, а какой ниже? Возможно, удобно будет создать 2-3 базовых класса в духе z-lvl-1, z-lvl-2... каждый последующий - с большим z-index'ом. И потом навешивать их на блоки в зависимости от необходимого расположения. position:relative, само собой, не забыть.

потому что в данном случае картинка - инлайновый (а точнее, inline-block) элемент. Величина смещения в данном случае зависит от 2 свойств: размера шрифта и, непосредственно, самого шрифта. Чтобы решить вашу проблему без эмуляции табличного layout'а достаточно задать font-size: 0 обертке.