Оптимальность решения: присвоение переменных внутри функции SCROLL
 

Нужно узнать высоту карусели в шапке для добавления класса в определенной точке прокрутки страницы.
Высота карусели находится в зависимости от ширины изображения, которое занимает 100% ширины самой карусели.

Сделал следующий скриптик:

$(window).scroll(function(){
    var sticky = $('.navbar-default');
    var carouselHeight = $('#horizontalCarousel').height();
    var scroll = $(window).scrollTop();

		if (scroll >= carouselHeight) sticky.addClass('navbar-fixed-top');
		else sticky.removeClass('navbar-fixed-top');
	});

Он работает, но возникает вопрос по оптимальности такого решения.
Получается, что при прокрутке каждый раз дергается DOM дерево, выбирается элемент по ID и переменной присваивается его высота элемента.
Если вынести
var carouselHeight = $('#horizontalCarousel').height();
из этой функции и сделать переменную глобальной - высота элемента может не вычисляться в случаях, если изображение внутри карусели не успело загрузиться, а так же при ресайзе страницы.

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

В связи с этим вопрос: как оптимизировать имеющееся решение?

alecto,
Объявите переменную глобально,

var carouselHeight;

а вычисляйте внутри обработчика по ресайзу и пр.

carouselHeight = $('#horizontalCarousel').height();

- будет доступно везде

спасибо, вроде получилось.

var t_carouselHeight = 0;

  $(window).resize(function(){
    t_carouselHeight = $('#horizontalCarousel').height() + 80;
  });

	$(window).scroll(function(){
    var t_scroll = $(window).scrollTop();

    if (t_carouselHeight == 0) 
      t_carouselHeight = $('#horizontalCarousel').height() + 80;

		if (t_scroll >= t_carouselHeight) t_sticky.addClass('navbar-colored');
  		else t_sticky.removeClass('navbar-colored');
	});