Фиксированный плавающий div

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

Но бывает, что это css свойство не подходит, т.к. фиксированный div, к примеру, когда страница находится в верхнем положении, должен быть посередине страницы, а при прокрутке съезжать в верх и уже там фиксироваться. Для реализации можно использовать jquery. Добавим на страницу следующие строчки кода, заключив их в тег script:

$(document).ready(function () {
    /* fixed - класс элемента, который фиксируем */
    var offset = $('.fixed').offset();
    var topPadding = 30; /* отступ элемента от верха страницы */
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            $('.fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
        }
        else {
            $('.fixed').stop().animate({marginTop: 0});
        }
    });
});

И ниже HTML код:

<div style="position: relative;">
<div class="fixed" style="position: absolute;">Произвольный текст</div>
</div>

Получается, у нас должен быть контейнер — элемент, в котором содержится фиксируемый div с position: relative. И сам элемент с классом fixed и css свойством position: absolute.

Похожие статьи

Статья оказалась полезной? Вырази благодарность - поделись в соцсетях

Отзывы : 17 комментариев

  1. а как сделать чтобы блок жёстко стоял а не бегал во время прокрутки???

  2. Спасибо за скрипт. Как можно в него добавить duration — продолжительность выполнения анимации?

    • Пожалуйста
      duration идет вторым параметром функции animation, т.е. примерно так:

      $('.fixed').stop().animate({marginTop: 0}, 500);
  3. Спасибо большое, попробую, а то я уже такое .animate({marginTop:0},{duration:0})} конструирую 🙂

    • Пожалуйста
      В таких случаях можно посмотреть пример использования, вот здесь например
      jquery-docs.ru/effects/animate/

  4. Добрый вечер. Скажите пожалуйста как остановить прокрутку вниз если появилось препятствие?
    Спасибо.

    • Остановить прокрутку (т.е. в нашем случае анимацию) можно методом .stop()

  5. Остановить прокрутку (т.е. в нашем случае анимацию) можно методом .stop()

    У меня не получается остановить блок по нижнему его краю перед если блок больше 1 экрана заезжает прямо в футер. Покажите пожалуйста в примере скрипта, как это прописать.

    • В этом случае скорее всего нужно в скрипте высчитывать расстояние до низа страницы и не давать блоку опускаться ниже заданной высоты

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

    if ($(«.fixed»).height()+topPadding+offset.top > высота_внешнего_блока) {
    $(«.fixed»).stop().animate({
    marginTop: высота_внешнего_блока — $(«.fixed»).height();
    });
    }

    • как его высчитывать если высота у всех страниц разная

      Высота страницы — это $(document).height()
      Значение scrollTop при котором мы упираемся в низ страницы можно получить так $(document).height() — $(window).height()
      Прибавить к получившемуся числу значение высоты футера (или до какого элемента нужно остановить div) и получим значение скролла, при котором опускать див уже не нужно. Добавим в начале функции обработчика события $(window).scroll условие
      if ($(window).scrollTop() < полученного значения)
      то анимируем див, иначе не трогаем.

      • А можно кодом это показать? у меня на сайте allremont59.ru скролит до бесконечности

  7. Спасибо, это для меня очень сложно пока, увы. Может быть Вы смогли бы в Вашем верхнем примере скрипта добавить эти условия. А то скрипт футер опускает до бесконечности, если блок больше высоты экрана.

  8. Давать с умным видом советы конечно проще, чем исправить ту фигню которая назывется скрипт и подается в начале страницы. Багнутый скрипт, опускается до бесконечности, на помойку.

  9. Здравствуйте, спасибо за скрипт.
    Вопрос: нельзя как-то сделать чтоб было position:absolute; но при этом блок двигался плавно с прокруткой, как эффект при position:fixed; ?

Комментирование отключено