Как зафиксировать при прокрутке сайдбар с динамически изменяющейся высотой?

Question

[smithana]

Добрый день.

Задача на первый взгляд простая.
При прокрутке экрана до конца сайдбара, фиксируем сайдбар.

Реализовал просто:

var $sidebar = $('aside'),
	footerOffset = $('footer').outerHeight() + 50,
	asideHeight = $sidebar.outerHeight() + $sidebar.offset().top + footerOffset + 5;

		$(window).scroll(function(){

			if ($(window).width() > 1019){
                             //Сайбар есть только на ПК разрешении
				var scroll = $(window).scrollTop() + $(window).height();
				
				if (scroll > asideHeight){
					$sidebar.css('position', 'fixed');				
				} else {
					$sidebar.css('position', '');
				}
			}
		});

И вроде бы оно работает, но не всегда.

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

Я перенёс данную функцию из $(document).ready в $(window).on("load"), стало лучше, но всё равно иногда бывает скрипты грузятся дольше, чем картинки на сайте.

За что можно зацепиться? Не хочется нагружать страницу постоянным пересчётом высоты сайдбара.
Отслеживать когда в динамических блоках скрипты нарисуют контент тоже не хочется, т.к. на разных страницах блоки в сайдбаре разные. Под все сложно подстроиться.

Спасибо!

Comments

[Алекс Глебов]

posityion: sticky?

[smithana]

Алекс Глебов, это правило хорошо работает, если необходимо зафиксировать элемент с отступом сверху или по бокам.
Но у меня не получается применить его, для фиксации снизу.
https://jsfiddle.net/p7dqxyy0/

Я понимаю, что элемент фиксируется относительно родителя. Т.е. sidebar по идее должен быть всегда в 30px от нижнего края экрана, пока не докрутится до 30px до конца container.

Но на деле почему-то это не срабатывает.

Answer 1

[smithana]

нашёл вот такое интересное решение.
www.backalleycoder.com/2013/03/18/cross-browser-ev...

Суть в том, что небольшой скрипт добавляет в элемент object и вешает listener на изменение его размера.
Работает на ура, с одним единственным косяком. В IE даже 10-ом, object имеет рамку. которую мне не удалось убрать ни какими стилями(