Как-то раньше я опубликовал заметку, в которой была реализация плавающего сайдбара. То есть, ставилась задача при прокручивании страницы вниз, в конце сайдбара зафиксировать блок, который бы не пропадал с зоны видимости, а залипал на месте.
С этой задачей тот код справлялся, но было два минуса:
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, и не заморачиваться с кодами. После установке, в любом виджете появляется галочка «Зафиксировать виджет», которая делает его плавающим.
Доброго времени суток! Статейка понравилась, но вот самый важный вопрос — не перечит ли это правилам адсенса? смотрю у вас на сайте адсенс стоит плавающий, у меня на моем сайте тоже, но вот стремаюсь пока так делать, так как почитав о частых баннах от адсенса.. вы что по этому поводу думаете?
Вот правила Adsense
Есть пункт, что нельзя размещать рекламу во всплывающих окнах. А такой фиксирующийся блок не является всплывающим и не перекрывает контент. Я не вижу в этом нарушения.
Спасибо за хороший совет. Я недавно пробовал плагин для этой цели, но на моём сайте он не заработал. Вообще хороший блог, спасибо.
Спасибо за статью, уже использую
Пишу собственный сайт, с нуля, что называется «от первой до последней буквы», использовал как пример этот код, у меня плавающий блок справа. Всё работает! Спасибо! Только при подключении первого скрипта в HEAD нужно дописать в начале: «http», иначе браузер долго думает при загрузке страницы, а это дорогого стоит в наше время.
Спасибо что заметили. Исправил в статье. Можно назвать это опечаткой.
Перепроверь вот этот код,
(function($) {
$.lockfixed(«#sidebar»,{offset: {top: 10, bottom: 10}});
})(jQuery);
тут у тебя помарка, в начале должен стоять иначе работать не будет, а для неопытного пользователя это мысль о том что ну типа зае… наебы… пошел я от сюда!!!
А в остальном статья норм, спасибо!!!
Ты имел ввиду этого
<script type=»text/javascript»>
не хватало? А то в твоем комменте вроде что-то съелось движком.
Поправил, точнее добавил. Странно, раньше вроде было. Может при редактировании статьи удалилось и я не заметил.
Спасибо за бдительность
Все это хорошо, но вот если ширина экрана меньше ширины контента (когда появляется горизонтальная полоса прокрутки), то блок с позишн фиксед заползает на текст…. Как-то можно исправить это?
Создаем или скачиваем js файл…
Лучше скачать, там другой код, как и в скрипте примера. Иначе получается прыжок блока вместо плавного скроллинга. Но спасибо за наводку
Исправил, сейчас код одинаковый.
Добрый день, а подскажите как мне задать позицию менюшки???
На шаге 3 в коде есть ‘top: 10, bottom: 10’, можно задать отступ сверху и снизу.
Если этого мало, то делается всё как обычно: помещаете код менюшки в блок div (как на шаге 4), а для него прописываете нужные стили.
работает. благодарю за знания! удачного $eo!
Хорошая вещь! Работает. Но есть еще нюанс.
В стилях подвижного блока должен обязательно присутствовать атрибут: box-sizing: border-box.
В противном случае он при прокрутке безмерно «толстеет»
Спасибо, помогли, уже устал искать =)
Товарищи, запилил данный пример на сайт.
1 косяк — у меня ширина сайдбара 242px, но после установки он стал уже, примерно на 20px. Как так понять не могу? Хотя в панели разработчика в опере вижу что стили не изменены и значение именно 242, хотя это не так.
2 косяк — открываю страницу, все нормально выглядит(за исключением ширины сайда), начинаю прокрутку и сайдбар улетает в левый край, а изначально он у меня справа. Пробовал и марджином подвинуть, толку нет.
Подскажите пожалуйста в чем дело.
По первому косяку: попробуйте в файл стилей в самый низ добавить #sidebar: {width: 242px;} ну и .sidebar: {width: 242px;} на всякий случай.
По второму косяку: возможно есть конфликт скриптов. Как исправить я не в курсе. Чтобы проверить так ли это, просто уберите все подключения скриптов между тегами head, кроме 2-х, которые в этой статье описаны и посмотрите на результат.
Здравствуйте! Давно искал пример реализации прилипающего блока. Наконец-то нашел :). Но у меня, почему-то, блок не поднимается вместе с футером, а перекрывает его.
Сделайте отступ снизу (bottom: 10) больше.
Спасибо, за подсказку! Не обратил внимание, что этот параметр регулируется
Есть еще классная реализация похожего блока здесь http://jsfiddle.net/GuwZC/ (рекомендую)
Я тоже это рекомендую!
Господа, помогите пожалуйста доработать под себя скриптик. Всё работает, НО! Как задать границу прилипания или то место, где блок отлипает и оказывается таки промотанным?
В шаге 3 поиграйтесь со значением bottom: 10.
Выше я уже отвечал на такой же вопрос.
Отличный скрипт, спасибо.
Но возник вопрос: как увеличить значение величины прокрутки, после которой блок начнёт прилипать к верхнему краю?
Мне вопрос не понятен. Блок же когда подошел к верхнему краю то и прилипает к нему.
Т.е. величина прокрутки как бы автоматически определяется скриптом, а как её задать самостоятельно я не в курсе.
Такой метод полезен только если скользящий блок по высоте меньше размера экрана. А вот если плавающий блок больше больше по высоте чем экран и сама страница занимает 3-5 экранов, то получается для того чтобы увидеть что в нижней части плавающего блока, нужно тупо крутить всю страницу вниз. Это огромный минус данного подхода.
По идее идеальный вариант это когда при прокрутке вниз, блок тоже прокручивается вместе со всей страницей и в конце цепляется за нижний край экрана и потом упирается в футер. И при прокрутке вверх с точностью до наоборот.
… прикиньте при таком подходе у вас в плавающем блоке находиться меню, которое по высоте больше высоты экрана (сейчас экраны разные есть), и получается чтобы увидеть нижние пункты придется крутить страницу вниз?
Вообще не работает что только не делал
Все работает отлично на ПК, а вот в мобильном браузере работает некорректно, верх экрана трясется, и сайт не прокручивает, почему так?
Да, если сайт оптимизирован под мобильные устройства, то этот скрипт работает некорректно (как вы и описали). Я языка js не знаю, поэтому исправить не смогу.
Может кто-то подскажет из знающих.
При горизонтальной прокрутке (уменьшите окно браузера в примере), плавающий блок наезжает на контент
Спасибо за решение!
Была проблема: при меньшей высоте основного блока, слайдер прыгал и страница не опускалась до футера.
Решение: задать минимальную высоту основного блока(колонки).
Например: min-height: 2300px;
У меня стоят тизеры в блоке, с 3-мя тизерами нормально работает, ставишь больше до футера не доходит, сайт начинает прыгать. Как это исправить, высоту блока пробовал разную ставить не помогает.
Добрый день!
Поставил себе на сайт, все работает нормально, но есть один БОЛЬШОЙ недостаток!
Если уменьшить окно браузера и передвинуть скрол на правую часть страницы с текстом, то при прокрутки вниз блок наезжает на текст, а должен оставаться в левой части экрана!
Это можно как то исправить?
Вот еще один интересный вариант без использования position и блок останавливается перед футером (что очень важно, чтобы не наезжал при маленьких разрешениях) — http://makeasite.ru/blog/sticky-block-at-sidebar.html
Благодарю за статью! Долго искал толковое решение, наконец нашел