Фиксированный (липкий) блок при прокрутке

Небольшой код на JavaScript позволяет сделать на странице фиксированный/липкий(sticky) блок

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 = 450,

      // высота подвала
      footerHeight =  250, 

      // считаем позицию, до которой блок будет зафиксирован 
      stopPos = scrollHeight - blockHeight - footerHeight; 

  var newcss = (topPos < window.pageYOffset) ? 
      'margin-left: 25px; top: 5px; position: fixed;' : 'position:static;';

  if ( window.pageYOffset > stopPos ) 
      newcss = 'position:static;';

  block.setAttribute( 'style', newcss );
    }
}

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *