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

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

Реализовать такую задумку очень просто с помощью небольшого скрипта на 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

CabinetAdmin 05 фев 2016, 17:14 Сообщение

Ну... Как объяснить то... Он останавливается в самом низу блока. Подвал, это ведь уже другой блок, со своей высотой:

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

<div id="page-body">
	центральное содержимое с боковой колонкой
</div>
<div id="page-footer">
	футер
</div>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 20 янв 2017, 20:32 Сообщение

А все эти правки для плавующего блока портала для 3.2.0 подойдут ?
  • 0

CabinetAdmin 21 янв 2017, 08:55 Сообщение

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

solo 29 янв 2017, 15:05 Сообщение

Здрасте помогите, сделал плавающий блок в сайт баре, все отлично работает на ПК, мой сайт адаптивный, когда просматриваю на смартфоне получается наложение на контент. Как сделать чтоб небыло наложения.
Спасибо за ранее
p.s. Если что я начинающий самоучка
  • 0

CabinetAdmin 29 янв 2017, 17:22 Сообщение

Можно попробовать перебить стилями при нужной ширине экрана, например так:

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

@media (max-width: 700px) {
	#scroll {
		position: static !important;
	}
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

solo 02 фев 2017, 08:08 Сообщение

Здравствуйте, я по тому же вопросу:
HTML разметка:
<div id="fixed">
// здесь мой код
</div>

<script type="text/javascript">
$(document).ready(function () {
var offset = $('#fixed').offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$('#fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {
$('#fixed').stop().animate({marginTop: 0});
}
});
});
</script>

css стиль:
#fixed{width:200px;position:absolute;}
Вопрос:
на ПК все отлично, а на смартфоне наезжает на контент футера. Можно ли как то подправить?
  • 0

solo 02 фев 2017, 08:11 Сообщение

Ссылка на мою страницу-http://soffit18.ru/s/
  • 0

CabinetAdmin 02 фев 2017, 16:44 Сообщение

В вашем случае будет выглядеть так:

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

#fixed {
	width: 300px;
	position: absolute;
}

@media (max-width: 800px) {
	#fixed {
		position: static !important;
		margin: 0 !important;
	}
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

solo 03 фев 2017, 08:19 Сообщение

Спасибо работает :Yahoo!:
  • 0

southklad 04 фев 2017, 15:34 Сообщение

А как бы прикрепить данную функцию к Advertisement Management, для phpBB3.1 для боковых вставок?
  • 0
Изображение

CabinetAdmin 05 фев 2017, 06:43 Сообщение

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

southklad 07 фев 2017, 09:24 Сообщение

А я не знаю как подробнее объяснить. :crazy:
  • 0
Изображение

CabinetAdmin 08 фев 2017, 16:23 Сообщение

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

southklad 08 фев 2017, 19:53 Сообщение

Вот так она в файле выводится

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

<!-- IF S_INDEX or S_VIEWFORUM or S_VIEWTOPIC -->

	<!-- IF ADS_ID_9 -->
		</div>
			</div>
	<!-- ENDIF -->

<!-- IF ADS_ID_10 -->
	</div>
	<div id="cp-menu">
		<div id="sidebar-right">
		{ADS_10}
		</div>
	</div>
</div>
<!-- ENDIF -->

<!-- IF ADS_ID_10 or ADS_ID_9 --></div><!-- ENDIF -->

<!-- ENDIF -->
в файле overall_footer_content_after
  • 0
Изображение

southklad 08 фев 2017, 20:11 Сообщение

Сделал вывод вот так в файле overall_header_stylesheets_after

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

<!-- INCLUDE @bb3mobi_ads/ads.js -->

<script type="text/javascript" src="./ext/bb3mobi/ads/styles/prosilver/template/stickyScroll.js"></script>
<script type="text/javascript">
	jQuery(function() {
		jQuery('#scroll').stickyScroll();
	});	
</script>
и вот так в файле overall_footer_content_after

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

<!-- IF S_INDEX or S_VIEWFORUM or S_VIEWTOPIC -->

	<!-- IF ADS_ID_9 -->
		</div>
			</div>
	<!-- ENDIF -->

<!-- IF ADS_ID_10 -->
	</div>
	<div id="scroll">
	<div id="cp-menu">
		<div id="sidebar-right">
		{ADS_10}
		</div>
	</div>
</div>
</div>
<!-- ENDIF -->

<!-- IF ADS_ID_10 or ADS_ID_9 --></div><!-- ENDIF -->

<!-- ENDIF -->
но не работает и выводится ошибка

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

Uncaught ReferenceError: jQuery is not defined at stickyScroll.js:27
  • 0
Изображение