Нужно узнать высоту карусели в шапке для добавления класса в определенной точке прокрутки страницы.
Высота карусели находится в зависимости от ширины изображения, которое занимает 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();
из этой функции и сделать переменную глобальной - высота элемента может не вычисляться в случаях, если изображение внутри карусели не успело загрузиться, а так же при ресайзе страницы.
т.е. было бы идеально вычислять размер глобально, когда изображение внутри карусели загружено, обновлять высоту при изменении размера окна.
но, если я присваиваю переменную внутри другой функции - она недоступна в нужном месте.
В связи с этим вопрос: как оптимизировать имеющееся решение?