Фиксирование блока при прокрутке страницы и его "остановка" по достижению "футера"
Вложений: 1
Товарищи, очень прошу разъяснить, как сделать подобную вещь. Нужно чтобы сайдбар (.sidebar) при скроле фиксировался, а по достижению футера, или более правильно, нижней границы блока (.help-blank), останавливался. Они выделены outline'ами. Страница и стили немного вырваны из контекста, прошу не кидаться камнями за минификацию css, нужные стили табулированы. Прикладываю архивчик. Спасибо!
|
вместо того, чтобы архив лепить, лучше на фиддле запилите, никому неохота расчехлять ваш зип.
|
Запилил на jsfiddle - http://jsfiddle.net/c2yu2f3f/1/
|
//получаем положение и размеры сайдбара после загрузки страницы и положение футера
var sTop = $('.sidebar').offset().top;
var sLeft = $('.sidebar').offset().left;
var sHeight = $('.sidebar').height();
var fTop = $('#footer').offset().top;
$(window).scroll(function () {
//получаем текущие координаты
var top = $(document).scrollTop();
//Если проспролили дальше, чем верхний край сайдбара был, когда страница открылась и нижний край сайдбара не упирается в футер, меняем позиционирование
if (top >= sTop && (top + sHeight) <= fTop) {
$('.sidebar').css({ 'position': 'fixed', 'top': '0px', 'left': sLeft + 'px' });
} else {
$('.sidebar').removeAttr('style');
}
});
|
| Часовой пояс GMT +3, время: 05:20. |