Фиксированный плавающий блок при прокрутке
29.10.2017 112 0 milan_shubin

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

Сегодня речь пойдет о одном из способов как сделать Фиксированный блок, который при прокрутке двигается с задержкой, пример видно на моем сайте справа. Еще одним несомненным плюсом является то что блок не смещается при горизонтальной прокрутке, он остается в своей зоне. Если зафиксировать обычным свойством position:fixed, то увы таких преимуществ не будет.

1. HTML разметка / код для ставки

В то место где нужно чтобы блок двигался, вставляем данную разметку. Обычно это место сайдбар. Главным элементом которой является блок div с ID fixed. Можете изменить, но потом не забудьте поменять название и в javascript и в CSS, чтобы потом не было проблем.
Код
<div id="fixed">
// Сюда вставляем любой код
</div>

2. Скрипт фиксации

Как и всегда в подвале перед закрывающимся body или если вы предпочитаете, в шапке перед закрывающимся head:
Код
<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>

В четвертой строке можете установить значение Padding от верхнего края. В 11 строке если нужно меняем значение margin от верхнего края. По умолчанию они стоят 0. Просто пишите величину в пикселях, но просто цифру, например 100.
Цитата
Ставьте только цифры, обозначение в пикселях - px указывать не надо!


3. CSS стили

Далее в файле стилей style.css, добавляем следующий код.
Ширину меняйте, стили добавляйте, но position:absolute не трогайте. Это основное условие в стилях для корректного отображения фиксированного блока:
Код
#fixed{width:200px;position:absolute;}

Сделав все по инструкции, результат не заставит себя ждать. Теперь можете организовать то что Вам нужно.

Материал взять с сайта: 7uarts.ga
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: milan_shubin
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать