Среда, 11 Октябрь 2017 11:46

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

Автор

Оцените материал
(604 голосов)
Плавающий блок/баннер для сайта, рабочий код Плавающий блок/баннер для сайта, рабочий код

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

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

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

<style>
@media only screen and (max-width: 979px) {
#fixed {
display: none;
}
}
</style>
<div>
<script type="text/javascript">// <![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 type="text/javascript">// <![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, куда будут входить все самые нужные, полезные и лучшие компоненты, плагины и модули, на мой взгляд, конечно!Подмигиваю

Всем удачи и добра!

Прочитано 714 раз

Поделитесь с друзьями этой статьей!

Макс Пуля

Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.

epicblog.net

Оставить комментарий