Вычисление ширины: как избежать повтора кода?

Question

[web_xaser]

Есть скрипт, который выполняет две функции: 1) фиксирует блок через некоторое время после прокрутки 2) задаёт ширину этого блока, в зависимости от другого блока.
Однако, с исполнением второй функции есть проблемы - работает лишь при дублировании строки вычисления ширины. Как подправить скрипт так, чтобы не было дубля этой строки?

function getTopOffset(e) { 
  var y = 0;
  do { y += e.offsetTop; } while (e = e.offsetParent);
  return y;
}
var block = document.getElementById('SecondBlock');
var newwidth = 'width: ' + (document.body.clientWidth - document.getElementById('MainBlock').offsetWidth - 64) / 2 + 'px';
block.setAttribute( 'style', newwidth );
if ( null != block ) {
  var topPos = getTopOffset( block );
  window.onscroll = function() {
    var newcss = (topPos < window.pageYOffset) ? 'top: 16px; position: fixed;' : '';
    var newwidth = 'width: ' + (document.body.clientWidth - document.getElementById('MainBlock').offsetWidth - 64) / 2 + 'px';
    block.setAttribute( 'style', newcss + '' + newwidth);
  }
}

Answer 1

[Илья]

Вынести в функцию?

function getWidth() {
	return (document.body.clientWidth - document.getElementById('MainBlock').offsetWidth - 64) / 2;
}

Comments

[web_xaser]

А ведь действительно. Спасибо!

Answer 2

[Faliah]

На сколько я понимаю, переменная newwidth имеет одно и то же значение в коллбэке onscroll и во внешнем, по отношению к этому коллбэку, коде, где она объявляется и инициализируется под переменной block. Если это так, то вы можете убрать объявление этой переменной из коллбэка, т.к. код, находящийся в нём имеет доступ к внешнему контексту (т.к. функции в JS являются замыканиями) и может обращаться к переменной newwidth, объявленной там:

function getTopOffset(e) { 
  var y = 0;
  do { y += e.offsetTop; } while (e = e.offsetParent);
  return y;
}
var block = document.getElementById('SecondBlock');
var newwidth = 'width: ' + (document.body.clientWidth - document.getElementById('MainBlock').offsetWidth - 64) / 2 + 'px';
block.setAttribute( 'style', newwidth );
if ( null != block ) {
  var topPos = getTopOffset( block );
  window.onscroll = function() {
    var newcss = (topPos < window.pageYOffset) ? 'top: 16px; position: fixed;' : '';
    block.setAttribute( 'style', newcss + '' + newwidth);
  }
}