Возникла следующая задача:
На странице в сайдбаре есть код, нужно этот код менять на другой при прокрутки страницы в низ (в идеале при остановке прокрутки заменять её на третью, а при прокрутке в верх на другую)
Реализовать можно всё, но как сделать это я не знаю. Подскажите пожалуйста код.
Вот код почти готов, нехватает подмены через каждых 1000 пикселей.
<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>
Вот эту проверку нужно куда то вставить и все будет работать , куда её нужно вставить?
if ( topPos > 1000 ){
block.innerHTML = "здесь html код нового баннера";
}