Скользящий блок на 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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://site.ru/путь_к_скрипту/jquery.lockfixed.js"></script>

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

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

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

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

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

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

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

<div id="sidebar">

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

</div>

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

P.S.

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

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

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

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

Поблагодарите автора репостом:
Предыдущие статьи:

37 комментариев к записи “Скользящий блок на jQuery в сайдбаре”

  • Denis

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

    • ARKSEO

      Вот правила Adsense

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

  • prostolinux

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

  • maryanin

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

  • Павел

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

    • ARKSEO

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

  • davydovdima

    Перепроверь вот этот код,

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

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

    • ARKSEO

      Ты имел ввиду этого

      <script type="text/javascript">

      не хватало? А то в твоем комменте вроде что-то съелось движком.

      Поправил, точнее добавил. Странно, раньше вроде было. Может при редактировании статьи удалилось и я не заметил.

      Спасибо за бдительность smile

  • Максим

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

  • Max

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

    • ARKSEO

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

  • Антон

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

    • ARKSEO

      На шаге 3 в коде есть ‘top: 10, bottom: 10’, можно задать отступ сверху и снизу.
      Если этого мало, то делается всё как обычно: помещаете код менюшки в блок div (как на шаге 4), а для него прописываете нужные стили.

  • Сергей

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

  • Артем

    Хорошая вещь! Работает. Но есть еще нюанс.
    В стилях подвижного блока должен обязательно присутствовать атрибут: box-sizing: border-box.
    В противном случае он при прокрутке безмерно «толстеет» smile

  • Данил

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

  • Aleksandr

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

    2 косяк — открываю страницу, все нормально выглядит(за исключением ширины сайда), начинаю прокрутку и сайдбар улетает в левый край, а изначально он у меня справа. Пробовал и марджином подвинуть, толку нет.

    Подскажите пожалуйста в чем дело.

    • ARKSEO

      По первому косяку: попробуйте в файл стилей в самый низ добавить #sidebar: {width: 242px;} ну и .sidebar: {width: 242px;} на всякий случай.

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

  • Павел

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

    • ARKSEO

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

  • Павел

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

  • rusmukh

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

  • Василий

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

    • ARKSEO

      В шаге 3 поиграйтесь со значением bottom: 10.
      Выше я уже отвечал на такой же вопрос.

  • Дмитрий

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

    • ARKSEO

      Мне вопрос не понятен. Блок же когда подошел к верхнему краю то и прилипает к нему.

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

  • Orsey

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

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

  • Orsey

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

  • Дмитрий

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

  • Сергей

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

    • ARKSEO

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

  • Влад

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

  • Станислав

    Спасибо за решение!

    Была проблема: при меньшей высоте основного блока, слайдер прыгал и страница не опускалась до футера.

    Решение: задать минимальную высоту основного блока(колонки).

    Например: min-height: 2300px;

    • Александр
      http://vkussovet.net

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

  • Сергей

    Добрый день!
    Поставил себе на сайт, все работает нормально, но есть один БОЛЬШОЙ недостаток!
    Если уменьшить окно браузера и передвинуть скрол на правую часть страницы с текстом, то при прокрутки вниз блок наезжает на текст, а должен оставаться в левой части экрана!
    Это можно как то исправить?

  • Александр

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

  • Игорь

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

Прокомментировать

Наверх ▲