Внешний вид сайта:

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

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

Шаг 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>

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

Комментарии

Нет комментариев. Ваш будет первым!