ipshenicyn of delaweb
8/3/2017 - 9:00 PM

Плагин сроллинга блока при прокрутке страницы, пример вызова: $('#scroll_block').scrollBlock({ options }); в options задаются:

Плагин сроллинга блока при прокрутке страницы, пример вызова: $('#scroll_block').scrollBlock({ options }); в options задаются: wrapElem - id или class внешнего элемента; topElem, bottomElem - если вверху или внизу подвижного блока внутри общего внешнего элемента есть дополнительные блоки; minWidthWindows - если сайт резиновый, то можно задать минимальную ширину когда скролл элемента не нужен; paddingBefore, paddingAfter - дополнительные расстояния вверху или внизу подвижного элемента pageUrl - массив страниц, на которых подвижный блок не должен двигаться ['/', '/index.php', /office/].

(function( $ ) {
    $.fn.scrollBlock = function( options ) {

        var settings = $.extend( {
            'wrapElem' : '.content', // class или id внешнего элемента например '.class' или '#id'
            'topElem' : '', // class или id верхнего дополнительного элемента например '.class' или '#id'
            'bottomElem' : '', // class или id эелемента нижнего дополнительного элемента например '.class' или '#id'
            'minWidthWindows' : 0, // мимимальная ширина при которой нужно отключать подвижность блока
            'paddingBefore' : 0, // дополнительное расстояние отступ от верха страницы при движении
            'paddingAfter' : 0, // дополнительное расстояние отступ от футера когда элемент дойдет до него
            'pageUrl' : [] // можно указать конкретные страницы где подвижный блок не нужен ['/', '/index.php', /office/]
        }, options);

        return this.each(function() {
            var navbar = $(this); // элемент который мы двигаем
            var wrapper = $(settings.wrapElem); // блок в котором двигается наш элемент
            var footer = $(settings.bottomElem); // если внутри wrapper внизу есть элемент на который нельзя наезжать
            var navbar2 = $(settings.topElem); // верхний элемент во враппере на который залазить нельзя
            var pathName = window.location.pathname;
            if (!(Number($.inArray(pathName, settings.pageUrl)) + 1)) { // если главная страница, отключаем наш подвижный блок
                if ($(window).width() > settings.minWidthWindows) {
                    var heightScrollElement = navbar.height(); // Высота подвижного блока
                    var navbarHeight = heightScrollElement + settings.paddingBefore; // высота подвижного блока + его отступы
                    var topDopPole = 0;
                    var heightDopPole = 0;
                    $(window).scroll(function () {
                        var heightOuterWrapper = wrapper.outerHeight(); // высота внешнего блока
                        var heightWrapper = wrapper.height(); // высота внешнего блока
                        var heightFooter = footer.height(); // высота нижнего элемента
                        var topWrapper = 0;
                        if (wrapper.length > 0) {
                            topWrapper = wrapper.offset().top; // начало внешнего блока
                        }
                        var topPoint = topWrapper;
                        if (navbar2.length > 0) {
                            topDopPole = navbar2.offset().top; // начало дополнительного поля
                            heightDopPole = navbar2.height(); // высота дополнительного поля внутри врапера
                            topPoint = topDopPole + heightDopPole - settings.paddingBefore;
                        }

                        var heightFooterPadding = heightFooter + settings.paddingAfter; // высота нижнего элемента с отступом

                        var startScroll = topPoint; // начальная высота от который начинает двигаться наш элемент
                        var endScroll = topWrapper + heightWrapper - navbarHeight - heightFooterPadding; // конечное расстояние до которого можно двигать наш элемент
                        var areaScroll = (topWrapper - topDopPole) + heightDopPole + navbarHeight + heightFooterPadding; // высота подвижной области
                        var scroll = $(document).scrollTop(); // значение высоты скролла

                        if (heightOuterWrapper > areaScroll) { // если высота враппера меньше подвижного блока, то отключаем подвижность
                            if (scroll > startScroll) { // если текущее положение скрола больше начальной высоты, начинаем двигаться
                                navbar.css('position', 'fixed');
                            } else { // иначе стоим на месте
                                navbar.css('position', 'relative');
                            }
                            if (scroll > endScroll) { // если блок дошел до конечной высоты то поднимаем его, что бы не залазил на футер
                                navbar.css('top', endScroll - scroll + settings.paddingBefore);
                            } else if (scroll < startScroll) { // если блок ещё не двигается определяем ему начальное положение
                                navbar.css('top', 0);
                            } else { // во всех остальных случаях двигаем
                                navbar.css('top', settings.paddingBefore);
                            }
                        } else {
                            navbar.css('position', 'relative');
                            navbar.css('top', 0);
                        }
                    });
                }
            }
        });
    };
})(jQuery);