Скользящий блок на jQuery в сайдбаре — легко

Скользящий блок на jQuery в сайдбареКак-то раньше я опубликовал заметку, в которой была реализация плавающего сайдбара. То есть, ставилась задача при прокручивании страницы вниз, в конце сайдбара зафиксировать блок, который бы не пропадал с зоны видимости, а залипал на месте.

С этой задачей тот код справлялся, но было два минуса:

1) Если блок длинный, то он наезжал на футер, что не есть хорошо. Как его подправить я не в курсе, так как JS не владею, только php слегка.

2) Приходилось методом тыка узнавать какой размер сайдбара в пикселях и прописывать в код.

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

Пример работы можно посмотреть здесь

Простая инструкция из 4-х шагов

Шаг 1. Создаем js файл с необходимым содержимым

Создайте файл jquery.lockfixed.js и поместите в него следующий код:

(function(e,p){e.extend({lockfixed:function(a,b){b&&b.offset?(b.offset.bottom=parseInt(b.offset.bottom,10),b.offset.top=parseInt(b.offset.top,10)):b.offset={bottom:100,top:0};if((a=e(a))&&a.offset()){var n=a.css("position"),c=parseInt(a.css("marginTop"),10),l=a.css("top"),g=a.offset().top,h=!1;if(!0===b.forcemargin||navigator.userAgent.match(/\bMSIE (4|5|6)\./)||navigator.userAgent.match(/\bOS ([0-9])_/)||navigator.userAgent.match(/\bAndroid ([0-9])\./i))h=!0;e(window).bind("scroll resize orientationchange load lockfixed:pageupdate",
a,function(k){if(!h||!document.activeElement||"INPUT"!==document.activeElement.nodeName){var d=0,d=a.outerHeight();k=a.outerWidth();var m=e(document).height()-b.offset.bottom,f=e(window).scrollTop();"fixed"!=a.css("position")&&(g=a.offset().top,c=parseInt(a.css("marginTop"),10),l=a.css("top"));f>=g-(c?c:0)-b.offset.top?(d=m<f+d+c+b.offset.top?f+d+c+b.offset.top-m:0,h?a.css({marginTop:parseInt((c?c:0)+(f-g-d)+2*b.offset.top,10)+"px"}):a.css({position:"fixed",top:b.offset.top-d+"px",width:k+"px"})):
a.css({position:n,top:l,width:k+"px",marginTop:(c?c:0)+"px"})}})}}})})(jQuery);

Закачайте этот файл себе на хостинг в любую папку. На шаге 2 нужно будет указать путь к нему.

Шаг 2. Подключаем скрипты в HEAD

Перед тегом </head> нужно вставить код подключения скрипта, созданного на шаге 1 (указав точный путь), а также, если не подключена библиотека jquery, то подключить и ее:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://site.ru/путь_к_скрипту/jquery.lockfixed.js"></script>

Шаг 3. Подключаем скрипт перед </body>

Перед тегом </body> вставляем этот код:

<script type="text/javascript"> 
(function($) {
        $.lockfixed("#sidebar",{offset: {top: 10, bottom: 10}});
})(jQuery);     
</script>

В этом коде при желании можно подрегулировать отступы.

Шаг 4. Вставляем наш блок в HTML

Это может быть блок с рекламой, меню, или топом постов вашего сайта.

Ваш код нужно поместить внутрь этого блока div:

<div id="sidebar">

здесь скользящий блок

</div>

Ну и все. Это поместите в сайдбар вашего сайта.

P.S.

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

Поэтому я у себя на сайте использую другую версию, код которой взял в паблике и немного переделал, вот ссылка на текстовый файл-инструкцию: https://seodnevnik.ru/download/alternative_sidebar.txt

Суть этой версии в том, что при размере окна браузера меньше 1100 px (можно поменять цифру), блок зафиксируется в сайдбаре и не будет наезжать на контент на мобильных устройствах.

Есть еще реализация похожего блока, показана здесь https://jsfiddle.net/GuwZC/.
И еще способы https://www.magentawave.com/2013/02/simple-jquery-floating-block.html

Но удобнее всего — это установить плагин Q2W3 Fixed Widget, и не заморачиваться с кодами. После установке, в любом виджете появляется галочка «Зафиксировать виджет», которая делает его плавающим.

Оцените статью
Дневник Сеошника
Добавить комментарий

  1. Denis

    Доброго времени суток! Статейка понравилась, но вот самый важный вопрос — не перечит ли это правилам адсенса? смотрю у вас на сайте адсенс стоит плавающий, у меня на моем сайте тоже, но вот стремаюсь пока так делать, так как почитав о частых баннах от адсенса.. вы что по этому поводу думаете?

    Ответить
    1. ARKSEO

      Вот правила Adsense
      Есть пункт, что нельзя размещать рекламу во всплывающих окнах. А такой фиксирующийся блок не является всплывающим и не перекрывает контент. Я не вижу в этом нарушения.

      Ответить
  2. prostolinux

    Спасибо за хороший совет. Я недавно пробовал плагин для этой цели, но на моём сайте он не заработал. Вообще хороший блог, спасибо.

    Ответить
  3. maryanin

    Спасибо за статью, уже использую

    Ответить
  4. Павел

    Пишу собственный сайт, с нуля, что называется «от первой до последней буквы», использовал как пример этот код, у меня плавающий блок справа. Всё работает! Спасибо! Только при подключении первого скрипта в HEAD нужно дописать в начале: «http», иначе браузер долго думает при загрузке страницы, а это дорогого стоит в наше время.

    Ответить
    1. ARKSEO

      Спасибо что заметили. Исправил в статье. Можно назвать это опечаткой.

      Ответить
  5. davydovdima

    Перепроверь вот этот код,
    (function($) {

    $.lockfixed(«#sidebar»,{offset: {top: 10, bottom: 10}});

    })(jQuery);
    тут у тебя помарка, в начале должен стоять иначе работать не будет, а для неопытного пользователя это мысль о том что ну типа зае… наебы… пошел я от сюда!!!

    А в остальном статья норм, спасибо!!!

    Ответить
    1. ARKSEO

      Ты имел ввиду этого
      <script type=»text/javascript»>
      не хватало? А то в твоем комменте вроде что-то съелось движком.
      Поправил, точнее добавил. Странно, раньше вроде было. Может при редактировании статьи удалилось и я не заметил.
      Спасибо за бдительность

      Ответить
  6. Максим

    Все это хорошо, но вот если ширина экрана меньше ширины контента (когда появляется горизонтальная полоса прокрутки), то блок с позишн фиксед заползает на текст…. Как-то можно исправить это?

    Ответить
  7. Max

    Создаем или скачиваем js файл…

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

    Ответить
    1. ARKSEO

      Исправил, сейчас код одинаковый.

      Ответить
  8. Антон

    Добрый день, а подскажите как мне задать позицию менюшки???

    Ответить
    1. ARKSEO

      На шаге 3 в коде есть ‘top: 10, bottom: 10’, можно задать отступ сверху и снизу.

      Если этого мало, то делается всё как обычно: помещаете код менюшки в блок div (как на шаге 4), а для него прописываете нужные стили.

      Ответить
  9. Сергей

    работает. благодарю за знания! удачного $eo!

    Ответить
  10. Артем

    Хорошая вещь! Работает. Но есть еще нюанс.

    В стилях подвижного блока должен обязательно присутствовать атрибут: box-sizing: border-box.

    В противном случае он при прокрутке безмерно «толстеет»

    Ответить
  11. Данил

    Спасибо, помогли, уже устал искать =)

    Ответить
  12. Aleksandr

    Товарищи, запилил данный пример на сайт.

    1 косяк — у меня ширина сайдбара 242px, но после установки он стал уже, примерно на 20px. Как так понять не могу? Хотя в панели разработчика в опере вижу что стили не изменены и значение именно 242, хотя это не так.
    2 косяк — открываю страницу, все нормально выглядит(за исключением ширины сайда), начинаю прокрутку и сайдбар улетает в левый край, а изначально он у меня справа. Пробовал и марджином подвинуть, толку нет.
    Подскажите пожалуйста в чем дело.

    Ответить
    1. ARKSEO

      По первому косяку: попробуйте в файл стилей в самый низ добавить #sidebar: {width: 242px;} ну и .sidebar: {width: 242px;} на всякий случай.
      По второму косяку: возможно есть конфликт скриптов. Как исправить я не в курсе. Чтобы проверить так ли это, просто уберите все подключения скриптов между тегами head, кроме 2-х, которые в этой статье описаны и посмотрите на результат.

      Ответить
  13. Павел

    Здравствуйте! Давно искал пример реализации прилипающего блока. Наконец-то нашел :). Но у меня, почему-то, блок не поднимается вместе с футером, а перекрывает его.

    Ответить
    1. ARKSEO

      Сделайте отступ снизу (bottom: 10) больше.

      Ответить
  14. Павел

    Спасибо, за подсказку! Не обратил внимание, что этот параметр регулируется

    Ответить
  15. rusmukh

    Есть еще классная реализация похожего блока здесь http://jsfiddle.net/GuwZC/ (рекомендую)

    Я тоже это рекомендую!

    Ответить
  16. Василий

    Господа, помогите пожалуйста доработать под себя скриптик. Всё работает, НО! Как задать границу прилипания или то место, где блок отлипает и оказывается таки промотанным?

    Ответить
    1. ARKSEO

      В шаге 3 поиграйтесь со значением bottom: 10.

      Выше я уже отвечал на такой же вопрос.

      Ответить
  17. Дмитрий

    Отличный скрипт, спасибо.

    Но возник вопрос: как увеличить значение величины прокрутки, после которой блок начнёт прилипать к верхнему краю?

    Ответить
    1. ARKSEO

      Мне вопрос не понятен. Блок же когда подошел к верхнему краю то и прилипает к нему.
      Т.е. величина прокрутки как бы автоматически определяется скриптом, а как её задать самостоятельно я не в курсе.

      Ответить
  18. Orsey

    Такой метод полезен только если скользящий блок по высоте меньше размера экрана. А вот если плавающий блок больше больше по высоте чем экран и сама страница занимает 3-5 экранов, то получается для того чтобы увидеть что в нижней части плавающего блока, нужно тупо крутить всю страницу вниз. Это огромный минус данного подхода.
    По идее идеальный вариант это когда при прокрутке вниз, блок тоже прокручивается вместе со всей страницей и в конце цепляется за нижний край экрана и потом упирается в футер. И при прокрутке вверх с точностью до наоборот.

    Ответить
  19. Orsey

    … прикиньте при таком подходе у вас в плавающем блоке находиться меню, которое по высоте больше высоты экрана (сейчас экраны разные есть), и получается чтобы увидеть нижние пункты придется крутить страницу вниз?

    Ответить
  20. Дмитрий

    Вообще не работает что только не делал

    Ответить
  21. Сергей

    Все работает отлично на ПК, а вот в мобильном браузере работает некорректно, верх экрана трясется, и сайт не прокручивает, почему так?

    Ответить
    1. ARKSEO

      Да, если сайт оптимизирован под мобильные устройства, то этот скрипт работает некорректно (как вы и описали). Я языка js не знаю, поэтому исправить не смогу.

      Может кто-то подскажет из знающих.

      Ответить
  22. Влад

    При горизонтальной прокрутке (уменьшите окно браузера в примере), плавающий блок наезжает на контент

    Ответить
  23. Станислав

    Спасибо за решение!
    Была проблема: при меньшей высоте основного блока, слайдер прыгал и страница не опускалась до футера.
    Решение: задать минимальную высоту основного блока(колонки).
    Например: min-height: 2300px;

    Ответить
    1. Александр

      У меня стоят тизеры в блоке, с 3-мя тизерами нормально работает, ставишь больше до футера не доходит, сайт начинает прыгать. Как это исправить, высоту блока пробовал разную ставить не помогает.

      Ответить
  24. Сергей

    Добрый день!

    Поставил себе на сайт, все работает нормально, но есть один БОЛЬШОЙ недостаток!

    Если уменьшить окно браузера и передвинуть скрол на правую часть страницы с текстом, то при прокрутки вниз блок наезжает на текст, а должен оставаться в левой части экрана!

    Это можно как то исправить?

    Ответить
  25. Александр

    Вот еще один интересный вариант без использования position и блок останавливается перед футером (что очень важно, чтобы не наезжал при маленьких разрешениях) — http://makeasite.ru/blog/sticky-block-at-sidebar.html

    Ответить
  26. Игорь

    Благодарю за статью! Долго искал толковое решение, наконец нашел

    Ответить