Прилипание меню при прокрутке. CSS & JS

Элемент прилипает только во время прохождения скроллом другого элемента

Не хочу никаких подсчётов. Да и футер может измениться (растянуться | сузиться) в зависимость от количества содержания. Желаю, чтобы элемент прилипал при касании его верхней границы окном браузера, а отлипал и останавливался, когда заканчивается поле footer. То есть нижние границы footer и элемента top-bloks-menu должны быть на одной линии.

Пример:

<?/*prilip block*/?>
	<style>
	.prilip {
	  position: fixed;
	  z-index: 101;
	  width:1280px;
	}
	.stop {
	  position: relative;
	}
</style>
<script>
	window.onload=function(){
		// document.documentElement.scrollHeight - высота веб-документа;
		// aside.offsetHeight - высота элемента
		//var aside = document.querySelector('aside'),
		var footer = document.querySelector('footer');
		var aside = document.getElementById('top-bloks-menu'),
		t0 = aside.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top,
		t1 = document.documentElement.scrollHeight - footer.offsetHeight - aside.offsetHeight;
		var this_index=0;
		<?if (($APPLICATION->GetCurPage(false) == '/')) echo"this_index=1;"?>
		function asideScroll() {
			if (window.pageYOffset > t1) {
				aside.className = 'stop';
				aside.style.top = t1 - t0 + 'px';
			} else {
				aside.className = (t0 < window.pageYOffset ? 'prilip' : 'top-content');
				//alert("1");
				if(t0 < window.pageYOffset)
					document.getElementById('menu_ul_level_1').style.display="";
				else if(this_index)document.getElementById('menu_ul_level_1').style.display="block";
				aside.style.top = '0';
			}
		}
		window.addEventListener('scroll', asideScroll, false);
		asideScroll();
	}
</script>
<?/*.prilip block*/?>