Статьи

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

Напевно, Ви бачили на багатьох сайтах як останній в колонці банер відчіплюється і переслідує Вас при прокручуванні сайту вниз. Це ми і зробимо сьогодні!

В інтернеті дуже багато скриптів і кодів плаваючого банера. Багато з них не працюють, а інші не підходять для наших цілей. Я представляю Вам повністю робочий код плаваючого блоку з подальшою зупинкою. Якщо Ваш сайт має адаптивний дизайн, то наявність такого плаваючого банера буде негативно позначатися на сайті і відвідувачів, тому плаваючий блок буде відключений при перегляді сайту через мобільні пристрої.

Ось код на 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 , Куди будуть входити всі найпотрібніші, корисні і кращі компоненти, плагіни та модулі, на мій погляд, звичайно!

Всім удачі і добра!

Що ще додати ?

Новости