Прилипание блока при прокрутке вниз

  • 3 Ответов
  • 215 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

ingavr

  • Давно я тут
  • ****
  • 279
  • 0
Доброго времени суток!
Много перерыл, но так и не нашёл конкретно моего случая.
Необходимо, чтобы блок останавливался (прилипал) к верху окна браузера тогда, когда он туда дойдёт (при прокрутке страницы) и (отлипал) когда прокручиваешь обратно страницу.

Нашёл решение, которое хоть как-то работает у меня, но там конкретная величина прокрутки, а надо чтобы этот блок замирал именно при соприкосновении с верхом окна.
вот код:
Код
<script type="text/javascript">
  jQuery(function ($) {
    $(window).scroll(function () {
        $('.feature-log')[
            ($(this).scrollTop() > 550 ? "add" : "remove") + "Class"
            ]("bar_fixed");
    });
});</script>

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

*

darkghost

  • Практически профи
  • *******
  • 2100
  • 94
Видимо шо то плохо или вовсе не там "копали" -) Вот Гулгля дает варианты, но а вот конкретный вариант
Другое дело если эти варианты не работают - тогда необходимо глубже "копать" и искать закавыку - почему?

*

ingavr

  • Давно я тут
  • ****
  • 279
  • 0
Видимо шо то плохо или вовсе не там "копали" -) Вот Гулгля дает варианты, но а вот конкретный вариант

И там и там я был.
Но, видать не разобрался как адаптировать это к своему варианту.
Особенно вторая ссылка - решение скорее всего рабочее, однако для меня сильно уж сложное.

« Последнее редактирование: 11.04.2017, 16:03:44 от ingavr »

*

ingavr

  • Давно я тут
  • ****
  • 279
  • 0
Собственно вот код, который заработал:
Код
<script type="text/javascript">
  jQuery(function ($) {
    var objToStick = $(".feature-log"); //Получаем нужный объект
    var topOfObjToStick = $(objToStick).offset().top; //Получаем начальное расположение нашего блока
    $(window).scroll(function () {
      var windowScroll = $(window).scrollTop();
        $(objToStick)[
            ($(this).scrollTop() > topOfObjToStick ? "add" : "remove") + "Class"
            ]("bar_fixed");
    });
});</script>

Это сборная солянка из нескольких))). останавливается в нужном месте.