Плавающий блок для сайта, рабочий код

Автор Макс Пуля

Плавающий блок/баннер для сайта, рабочий код

Наверняка, Вы видели на многих сайтах как последний в колонке баннер отцепляется и преследует Вас при прокрутке сайта вниз. Это мы и сделаем сегодня!

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

Вот код на javascript и jQuery:

<style>
@media only screen and (max-width: 979px) {
#fixed {
display: none;
}
}
</style>
<div>
<script>// <![CDATA[
jQuery(function() {
var offset = jQuery("#fixed").offset();
var topPadding = 20,
bottomPadding = 550; //высота над которой остановится блок
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > offset.top) {
if (jQuery(document).height() - bottomPadding > jQuery(window).scrollTop() + jQuery("#fixed").height()) jQuery("#fixed").stop().animate({
marginTop: jQuery(window).scrollTop() - offset.top + topPadding
});
} else {
jQuery("#fixed").stop().animate({
marginTop: 0
});
};
});
});// ]]></script><script>// <![CDATA[jQuery.noConflict();
(function($){})(jQuery);// ]]></script>
</div>
<div id="fixed">
<div id="plav_mod_titl"></div>
<div id="plav_txt">
Здесь то, что будет плавать у вас!
</div>
</div>

Теперь его нужно просто вставить на сайт. Если Вы используете joomla - скачайте и установите модуль Custom HTML advansed. Теперь нужно просто создать новый модуль Custom HTML advanced, вставить весь код в Custom HTML, выбрать позицию и опубликовать модуль. Вот и всё - просто и элементарно!

Что еще добавить?! В ближайшем будущем планирую собрать, так сказать, джентльменский набор joomla, куда будут входить все самые нужные, полезные и лучшие компоненты, плагины и модули, на мой взгляд, конечно!