1 Topic by PunBB

Topic: Как зафиксировать рекламный блок в сайдбаре

Для начала нужно немного подкорректировать код блока, который собираемся фиксировать. Я буду показывать на примере рекламного блока в сайдбаре Wordpress.
Код рекламы обычно вставляется в стандартный текстовый виджет (в консоли WordPress меню Внешний Вид → Виджеты). Находим свой виджет с рекламой (или добавляем новый, если нужно) и вокруг кода рекламы добавляем тег div вот так:

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

1

2 Reply by PunBB

Re: Как зафиксировать рекламный блок в сайдбаре

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

<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>

Таким образом можно фиксировать любые блоки и на других CMS.