Элемент прилипает только во время прохождения скроллом другого элемента
Не хочу никаких подсчётов. Да и футер может измениться (растянуться | сузиться) в зависимость от количества содержания. Желаю, чтобы элемент прилипал при касании его верхней границы окном браузера, а отлипал и останавливался, когда заканчивается поле 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*/?>
Добавить комментарий