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

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




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

Код:

<div id="fixblock">тут должен быть ваш код нужного вам блока</div>

Чтобы дальше в скрипте идентифицировать блок, ему установлен атрибут id со значением fixblock.

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

PHP:

<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'); /* fixblock - значение атрибута id блока */
if ( null != block ) {
    var topPos = getTopOffset( block );
    window.onscroll = function() {
        var newcss = (topPos < window.pageYOffset) ?
            'top:20px; position: fixed;' : 'position:static;';
        block.setAttribute( 'style', newcss );
    }
}
</script>

Сохраняем и проверяем как все работает.

Вариант с точно указанной высотой (подставьте свои значения в пикселах):

PHP:

<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'); /* fixblock - значение атрибута id блока */
if ( null != block ) {
    var topPos = getTopOffset( block );

    window.onscroll = function() {
        var scrollHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),

            // высота рекламного блока
            blockHeight = 400,

            // высота подвала
            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>

Вариант с автоматическим определением вычислением высоты зафиксированного блока и подвала (замените id подвала на свой):

PHP:

<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'); /* fixblock - значение атрибута id блока */
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 = document.getElementById('footer').offsetHeight,        

            // считаем позицию, до которой блок будет зафиксирован
            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>

В рабочем виде данный код вы можете наблюдать на главной странице нашего форума справа под соц сетями. Теперь ни один посетитель не убежит от рекламы!)

Всем удачи в сайтостроении!

 

Цитата:

От гугла можно схлопотать, а вот с ЯндексДирект другая ситуация, там можно

 

Цитата:

На авторитетных сайтах часто видел и от гугл рекламу, которая преследует тебя по всему сайту)