Плавающий или фиксированный блок при прокрутке.

Смысл. Сайт имеет правую колонку, основное поле (левая колонка) имеет много разделов с очень долгой прокруткой до самого низа. И есть смысл зафиксировать правую колонку или блок, особенно если там содержится полезная информация.

Реализовать такую задумку очень просто с помощью небольшого скрипта на jQuery.

Скачиваете скрипт. Добавляете его в секцию <head> шаблона overall_header.html:

Код: Выделить всё

<script type="text/javascript" src=".../stickyScroll.js"></script>
<script type="text/javascript">
	jQuery(function() {
		jQuery('#scroll').stickyScroll();
	});	
</script>
Не забудьте о наличии библиотеки jQuery и пути до файла.
stickyScroll.rar
502 байт 658 скачиваний
(Скрипт заменён - 17.03.2015 // CabinetAdmin)


По умолчанию в скрипте выставлено "плавание" блока при прокрутке. Её можно отключить, чтобы блок фиксировался на месте.
В начале файла находите:

Код: Выделить всё

duration: 300,
меняете значение на 0, или на любое другое в зависимости от ваших потребностей. Чем выше число, тем медленнее блок движется при прокрутке.

Пример применения мода на правой колонке портала.

Открываете шаблон /portal/portal_body.html, находите место где начинается правая колонка, она отмечена комментарием на вроде <!-- [+] right block area -->. И, если допустим мы хотим зафиксировать всю колонку, после:

Код: Выделить всё

<!-- [+] right block area -->
	<td valign="top" style="width: {PORTAL_RIGHT_COLUMN}px; padding-left:6px;">
		<br style="clear:both" />
добавляете:

Код: Выделить всё

<div id="scroll">
и перед:

Код: Выделить всё

	</td>
<!-- [-] right block area -->
добавляете: Т.е. оборачиваете нужный вам блок в:

Код: Выделить всё

<div id="scroll">
	<!-- фиксированный блок -->
</div>
Вот собственно и всё.

Пример можно посмотреть здесь:
Комментарии: 76

romaamor 30 сен 2014, 17:04 Сообщение

В принципе сделать так как я хотел удалось при помощи другого скрипта. Но вод не задача, все ссылки в меню при прокрутке страницы становятся не активными. Видать не суждено.

Вот сам фиксированный блок. Может кому понадобится.

Задача

Реализовать фиксированный блок с плавающим верхним отступом.

HTML

Код: Выделить всё

<div id="fixedBox">
		Какой-то очень важный блок, который все время нужно видеть.
	</div>
В CSS задаем оформление и позиционирование:

Код: Выделить всё

#fixedBox {
	/* размеры фиксированного блока */
	height: 30px;
	width: 900px;
	position: fixed;
	/* отступ сверху когда шапка видна полностью */
	margin-top: 170px;
}
Скрипт для пересчета отступа на основе jQuery (естественно, не забудь подключить и саму библиотеку):

Код: Выделить всё

<script type="text/javascript">
jQuery(document).ready(function(){
	/* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */
	function getScrollTop() {
			   var scrOfY = 0;
			   if( typeof( window.pageYOffset ) == "number" ) {
					   //Netscape compliant
					   scrOfY = window.pageYOffset;
			   } else if( document.body
			   && ( document.body.scrollLeft
			   || document.body.scrollTop ) ) {
					   //DOM compliant
					   scrOfY = document.body.scrollTop;
			   } else if( document.documentElement
			   && ( document.documentElement.scrollLeft
				|| document.documentElement.scrollTop ) ) {
					   //IE6 Strict
					   scrOfY = document.documentElement.scrollTop;
			   }
			   return scrOfY;
	}
	/* пересчитываем отступ при прокрутке экрана */
	jQuery(window).scroll(function() {
		fixPaneRefresh();
	});
	
	function fixPaneRefresh(){
		if (jQuery("#fixedBox").length) {
			var top  = getScrollTop();
			if (top < 170) jQuery("#fixedBox").css("margin-top",170-top+"px"); /* 170 - это наш отступ */
			else jQuery("#fixedBox").css("margin-top","0");
		}
	}

});
</script>

  • 0

CabinetAdmin 30 сен 2014, 19:47 Сообщение

romaamor » Сегодня, 20:04 писал(а):Но вод не задача, все ссылки в меню при прокрутке страницы становятся не активными.
Добавь z-index: 9;. Должны стать активными.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 30 сен 2014, 20:49 Сообщение

CabinetAdmin » 51 минуту назад писал(а):Добавь z-index: 9;. Должны стать активными.
Становятся активными, но все остальные ссылки сайта - нет.
  • 0

CabinetAdmin 01 окт 2014, 14:28 Сообщение

Не должно быть такого.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 01 окт 2014, 16:50 Сообщение

CabinetAdmin » Сегодня, 15:28 писал(а):Не должно быть такого.
Не вероятно но факт. Как бы получается слой который перекрывает весь сайт.
  • 0

romaamor 16 мар 2015, 20:00 Сообщение

CabinetAdmin,а где скрипт ? Было бы круто если Вы его перезальёте. Спасибо.
  • 0

romaamor 16 мар 2015, 20:13 Сообщение

Выдернул у Вас с демо страницы адрес скрипта. :)
  • 0
Последний раз редактировалось romaamor 16 мар 2015, 23:49, всего редактировалось 1 раз.

romaamor 16 мар 2015, 20:44 Сообщение

Пытаюсь прикрутить к этому ещё и - http://cabinetadmina.ru/viewtopic.php?f=121&t=3750. Не выходит. Оно вообще будет работать с такой связкой ?
  • 0

CabinetAdmin 16 мар 2015, 21:04 Сообщение

Должен.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 16 мар 2015, 21:09 Сообщение

Главное чтобы работало: скрипт должен быть после библиотеки, у блока должен быть id="scroll".
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 17 мар 2015, 03:54 Сообщение

Не как. Уже часов 6 мучаюсь. Ваш скрипт не как не хочет работать. В нете нашёл рабочие но все не то. Заезжают на футер.
CabinetAdmin, ведь здесь этот скрипт используется ? -

Код: Выделить всё

<script type="text/javascript">
	(function($){
	    $.fn.stickyScroll = function(options) {
	        var defaults = {  
	            easing: 'linear',
	            duration: 300,
	            queue: false
	        }, $t = this;
	        options = $.extend(defaults, options);
	        this.css({ position: 'relative', top: 0 });
	        $(window).scroll(function() {
	            var wst = $(window).scrollTop();
	            $t.each(function() {
	                var getObject = $(this), parent = getObject.parent()
	                if(wst > (parent.offset().top) &&
	                    (parent.height() + parent.position().top - 20) > (wst + getObject.height())
	                ){
	                    getObject.animate({ top: (wst - parent.offset().top) + "px" }, 
	                        { queue: options.queue, easing: options.easing, duration: options.duration });
	                } else if(wst < (parent.offset().top)){
	                    getObject.animate({ top: "0px" },
	                        { queue: options.queue, easing: options.easing, duration: options.duration });
	                }
	            });
	        });
	        return this;
	    };
	})(jQuery);
</script>
  • 0

CabinetAdmin 17 мар 2015, 06:28 Сообщение

Плюс вызов:

Код: Выделить всё

<script type="text/javascript">
	jQuery(function() {
		jQuery('#scroll').stickyScroll();
	});	
</script>
Без него скрипт отрабатывать не будет.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 17 мар 2015, 17:02 Сообщение

CabinetAdmin писал(а): Плюс вызов:
Само собой. Тем ни мение не работает.
  • 0

CabinetAdmin 17 мар 2015, 17:54 Сообщение

У боковой колонки есть указанная высота? Пространство по которому блок должен скользить.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 17 мар 2015, 18:00 Сообщение

CabinetAdmin писал(а): У боковой колонки есть указанная высота? Пространство по которому блок должен скользить.
Должен ходить вдоль списка тем форума. Что бы было понятно то вот мой тестовый форум - http://3.1.0.satelitray.ru/viewforum.php?f=3
Блок рекламы.
  • 0