Главная
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;}

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




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


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

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

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

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

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

      Здравствуйте. Замените код скрипта на такой:
      В 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

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

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

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

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

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

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

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

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

    А как его вправо перенести?

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

      А как вы его влево поставили? 🙂
      Блок не имеет позиционирования. Его нужно добавлять внутрь любого другого блока который и должен размещаться слева или справа.

  • Александр
    Комментариев: 1

    Добрый день, возможно ли что бы блок останавливался на определенном расстоянии от другого блока?

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

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

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

    Как сделать этот элемент плавающим только в ПК, а не на смартфонах?

  • Алекс
    Комментариев: 2

    все зашибись, а демку выложить не судьба?????

  • Алекс
    Комментариев: 2

    http://shpargalkablog.ru/2013/09/scroll-block.html не реклама, просто в тему

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

    Не работает!

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

    Добрый день! Спасибо за статью, но хотел бы присоединиться к предыдущим комментаторам, заявлявшим, что код не работает. Он, правда, не то, что не работает совсем, а ведёт себя немного странно.

    Попробовал у себя на сайте cccp-blog.com и практически сразу же удалил.

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

    Откуда-то появилось расстояние от предыдущего блока до фиксируемого, причём весьма значительное.

    Ну, и анимация при скролле, я считаю, не совсем уместна.

    Вместо вашего кода воспользовался данным. Работает как часы, правда, с небольшой настройкой.

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

    Статья, откуда я взял итоговый код - http://avovkdesign.com/kak-zafiksirovat-blok-v-bokovoj-kolonke-s-pomoshhyu-javascript.html

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

    Здравствуйте, Виталий.
    Мне нужно сделать так, чтобы фиксированный блок замирал при прохождении футера.
    Подскажите, как это реализовать?
    Пример - на этом сайте.
    http://t984295d.beget.tech/
    Чтобы левый сайдбар, замирал внизу при прохождении границы футера

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

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

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

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

Это не спам *

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

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко