Фиксируем рекламный блок в боковой колонке с помощью JS

Тема в разделе "Сайтостроение: общий форум", создана пользователем admin, 13 сен 2017.

Реклама
  1. admin

    admin Administrator Команда форума

    Сообщения:
    8
    Симпатии:
    0
    Пол:
    Мужской
    Сайт:
    Для того, чтобы зафиксировать блоки или один блок в области экрана при прокрутке страницы, на поможет данный скрипт:

    [​IMG]


    Находим свой блок который вы хотели бы зафиксировать и вокруг кода добавляем тег div вот так:


    Код:
    <div id="fixblock">тут должен быть ваш код нужного вам блока</div>
    Чтобы дальше в скрипте идентифицировать блок, ему установлен атрибут id со значением fixblock.

    Теперь нужно добавить код скрипта, который будет фиксировать блок на странице при прокрутке.
    Для этого копируем код ниже (помним про значение id) и добавляем его перед закрывающим тегом

    Код:
    <script type="text/javascript">
    function getTopOffset(e) {
        var y = 0;
        do { y += e.offsetTop; } while (e = e.offsetParent);
        return y;
    }
    var block = document.getElementById('fixblock');
    if ( null != block ) {
    var topPos = getTopOffset( block );
    window.onscroll = function() {
    var scrollHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),
     // определяем высоту рекламного блока
    blockHeight = block.offsetHeight,
    // вычисляем высоту подвала, footer заменить на значение атрибута id подвала
    footerHeight = 500,     
    // считаем позицию, до которой блок будет зафиксирован
    stopPos = scrollHeight - blockHeight - footerHeight;
    
    var newcss = (topPos < window.pageYOffset) ? 'top:20px; position: fixed;' : 'position:static;';
    if ( window.pageYOffset > stopPos )
    newcss = 'position:static;';
    block.setAttribute( 'style', newcss );
    }
    }
    </script>
    Сохраняем и проверяем как все работает.
    В рабочем виде данный код вы можете наблюдать на главной странице нашего форума справа под соц сетями. Теперь ни один посетитель не убежит от рекламы!)

    Всем удачи в сайтостроении!
     
    Последнее редактирование: 22 сен 2017 в 21:23

    Реклама: BestChange - наиболее выгодные курсы обмена валют онлайн.
Реклама

Поделиться этой страницей