Главная
Web-дизайн
Фиксированный плавающий блок при прокрутке

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

Фиксированный блок

Доброго времени суток 🙂
Сегодня речь пойдет о одном из способов как сделать Фиксированный блок, который при прокрутке двигается с задержкой, пример видно на моем сайте справа. Еще одним несомненным плюсом является то что блок не смещается при горизонтальной прокрутке, он остается в своей зоне. Если зафиксировать обычным свойством 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;}

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(21 голос, в среднем: 4.7 из 5)

Опубликовано 6 комментариев

  • Миша
    Комментариев: 2

    как сделать так, чтобы этот блок остановился на определённом расстоянии от низа блока, в котором он находится? Сайт разъезжается!

    • Виталий
      Комментариев: 269

      Здравствуйте. Замените код скрипта на такой:
      В 4 строке укажите высоту подвала.

      $(document).ready(function () {
      var offset = $("#fixed").offset();
      var topPadding = 20,
      bottomPadding = 210; //высота над которой остоновится
      $(window).scroll(function() {
      if ($(window).scrollTop() > offset.top) {
      if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) $("#fixed").stop().animate({
      marginTop: $(window).scrollTop() - offset.top + topPadding
      });
      } else {
      $("#fixed").stop().animate({
      marginTop: 0
      });
      };
      });

      });

  • Миша
    Комментариев: 2

    Спасибо! Но есть ещё одна проблема с анимацией! на некоторых страницах блок начинает перемещаться гораздо ниже видимой зоны экрана. Тем самым двигая футер до бесконечности. Как сделать так, чтобы блок какбы прилипал к верхней части экрана и двигался только с ней... можно даже без анимации. Заранее спасибо!

    • Виталий
      Комментариев: 269

      Если Вы заменили код из статьи тем что я показал в комментариях и правильно указали отступ, то такой проблемы не должно быть.

  • Лана
    Комментариев: 1

    А как сделать без анимации

    • Виталий
      Комментариев: 269

      Здравствуйте! Возможно Вам подойдет скрипт из этой статьи - http://gnatkovsky.com.ua/menyu-blok-s-plavayushhej-fiksaciej-jquery.html

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий