Плаваючий блок

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

Приклад реалізований з допомогою використання JQuery, а це означає, що вам слід попередньо підключити його в заголовку сторінки. Далі в тілі документа розміщується сам блок:

Потім прописуємо код, який зробить ефект для блоку:

$(window).load(function() {
var block = $(‘#fly_block’); // ID блоку
var position = block.position();
var windowpos = 0;
$(window).scroll(function() {
wintop = $(window).scrollTop();
if(wintopДавайте розберемося, що робить цей код. Код задає css властивість position=fixed для блоку, в той момент, коли ми докручиваем сторінки до верхнього краю блоку. Таким чином, блоки, розташовані вище плаваючого блоку не будуть перекриватися фіксованим блоком, він «попливе» щодо них. Зав’язано все це справа в подію прокрутки вікна $(window).scroll().

Ось приклад плаваючого блоку, успіхів!

Додав: htmaker, 22.08.2015 р.
(Ще не оцінили)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript