Скользящий блок на jQuery в сайдбаре
Шаг 1. Создаем или скачиваем js файл.
Можете скачать файл скрипта jquery.lockfixed.min (правой кнопкой мыши → сохранить по ссылке)
Создайте файл 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>
Ну и все. Это поместите в сайдбар вашего сайта.
Комментарии