Как сделать bottom line?

Question

[aPilot]

Как сделать строку (блок) bottom line баннер, короче полоску внизу сайта, которая появляется при скроллинге вниз после того, как посмотрел 50% страницы и исчезает при скроллинге вверх?
Кто знает подскажите или дайте ссылку на материал.

Answer 1

[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();

Comments

[aPilot]

Он просто висит в подвале всегда