Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Фиксирование блока при прокрутке страницы и его "остановка" по достижению "футера" (https://javascript.ru/forum/jquery/50277-fiksirovanie-bloka-pri-prokrutke-stranicy-i-ego-ostanovka-po-dostizheniyu-futera.html)

ilyakor 19.09.2014 16:15

Фиксирование блока при прокрутке страницы и его "остановка" по достижению "футера"
 
Вложений: 1
Товарищи, очень прошу разъяснить, как сделать подобную вещь. Нужно чтобы сайдбар (.sidebar) при скроле фиксировался, а по достижению футера, или более правильно, нижней границы блока (.help-blank), останавливался. Они выделены outline'ами. Страница и стили немного вырваны из контекста, прошу не кидаться камнями за минификацию css, нужные стили табулированы. Прикладываю архивчик. Спасибо!

Viral 19.09.2014 16:24

вместо того, чтобы архив лепить, лучше на фиддле запилите, никому неохота расчехлять ваш зип.

ilyakor 19.09.2014 16:29

Запилил на jsfiddle - http://jsfiddle.net/c2yu2f3f/1/

Viral 19.09.2014 16:52

//получаем положение и размеры сайдбара после загрузки страницы и положение футера
        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, время: 17:23.