Плагин сроллинга блока при прокрутке страницы, пример вызова: $('#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);