- Как сделать плавающий блок на сайте?
- Самый рабочий способ
- Самый простой способ (для WordPress)
- Другие способы реализации скользящих блоков
- Вариант #1 (без jQuery)
- Вариант #2 (с jQuery)
- Site Builder
- Cайто-Cтроитель.рф Поиск по Сайту
- Плавающее окно на CSS.
- Окно напоминания пользователю, о регистрации.
- Установка плавающего окна на DLE.
- Хороший совет, по установке плавающего баннера.
- Плавающие фреймы
Как сделать плавающий блок на сайте?
Плавающий блок (или как его ещё называют двигающийся, фиксированный, прилипший) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент, в который чаще всего помещают рекламу (тизеры, баннеры или контекст).
Такая «плавающая» реклама заметно повышает число показов и переходов по ней, а соответственно и доход.
Рекламу Adsense помещать в фиксированный блок нельзя.
Увы, правила адсенса нам это запрещают. Тем не менее, многие владельцы сайтов игнорируют правила на свой страх и риск. Может быть, их за это даже не наказывают, но я бы не советовал рисковать.
Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.
Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.
Задача: сделать последний блок в боковой колонке (сайдбаре) – плавающим. Причём, чтобы он прилипал только в тот момент, когда пользователь доходит до него скроллингом, а не сразу при открытии страницы. Также блок должен «отлипать», доходя до футера (т.е. не перекрывать его).
Самый рабочий способ
Существует много вариантов реализации прилипающего блока, но не все они работают корректно. Скажу из личного опыта: один и тот же метод установки блока может сработать на одном сайте, а на другом появятся косяки.
Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).
В желаемом месте боковой колонки вставляем такой HTML-код:
Далее создаем файл fixads.js и прописываем в него:
$ ( window ) .scroll ( function ( ) <
var sb_m = 20 ; / * отступ сверху и снизу * /
var mb = 300 ; / * высота подвала с запасом * /
var st = $ ( window ) .scrollTop ( ) ;
var sb = $ ( «.sticky-block» ) ;
var sbi = $ ( «.sticky-block .inner» ) ;
var sb_ot = sb.offset ( ) .top;
var sbi_ot = sbi.offset ( ) .top;
var sb_h = sb. height ( ) ;
if ( sb_h + $ ( document ) .scrollTop ( ) + sb_m + mb < $ ( document ) . height ( ) ) <
if ( st > sb_ot ) <
var h = Math.round ( st — sb_ot ) + sb_m;
sb.css ( < "paddingTop" : h >) ;
>
else <
sb.css ( < "paddingTop" : 0 >) ;
>
>
> ) ;
В этом коде можно задать отступы сверху, снизу, а также высоту вашего подвала, т.е. ту высоту, на которой блоку нужно остановиться.
Теперь подкключаем JS. Для этого прописываем в секции HEAD:
Самый простой способ (для WordPress)
Также безотказный метод, но при помощи установки плагина Q2W3 Fixed Widget (Sticky Widget). Работает без косяков.
Достоинства:
- лишняя нагрузка на сервер;
- не гибкий. Плавающим становится весь виджет (включая название и его оформление). Допустим, сделать этот блок иным цветом или размером будет сложно.
Как пользоваться:
- Скачиваем плагин.
- Устанавливаем.
- Активируем.
- Заходим в админке во вкладку: Дизайн -> Виджеты. Открываем тот виджет, который хотим сделать фиксированным.
- Ставим галочку возле «Зафиксировать виджет» и нажимаем кнопку «Сохранить».
Другие способы реализации скользящих блоков
Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.
Вариант #1 (без jQuery)
Прописываем стили в HTML (лучше добавить сразу в CSS):
Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):
< script >
( function ( ) <
var a = document.querySelector ( ‘#aside1’ ) , b = null, P = 0 ; // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
window.addEventListener ( ‘scroll’ , Ascroll, false ) ;
document.body.addEventListener ( ‘scroll’ , Ascroll, false ) ;
function Ascroll ( ) <
if ( b == null ) <
var Sa = getComputedStyle ( a, » ) , s = » ;
for ( var i = 0 ; i < Sa.length; i++ ) <
if ( Sa [ i ] .indexOf ( ‘box-sizing’ ) == 0 || Sa [ i ] .indexOf ( ‘overflow’ ) == 0 || Sa [ i ] .indexOf ( ‘width’ ) == 0 || Sa [ i ] .indexOf ( ‘padding’ ) == 0 || Sa [ i ] .indexOf ( ‘border’ ) == 0 || Sa [ i ] .indexOf ( ‘outline’ ) == 0 || Sa [ i ] .indexOf ( ‘box-shadow’ ) == 0 || Sa [ i ] .indexOf ( ‘background’ ) == 0 ) <
s + = Sa [ i ] + ‘: ‘ +Sa.getPropertyValue ( Sa [ i ] ) + ‘; ‘
>
>
a.innerHTML = ‘
‘ ;
b = a.children [ 0 ] ;
a. style . height = b.getBoundingClientRect ( ) . height + ‘px’ ;
a. style .padding = ‘0’ ;
a. style . border = ‘0’ ;
>
var Ra = a.getBoundingClientRect ( ) ,
R = Math.round ( Ra.top + b.getBoundingClientRect ( ) . height — document.querySelector ( ‘footer’ ) .getBoundingClientRect ( ) .top + 0 ) ; // селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент; Math.round ( ) только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
if ( ( Ra.top — P ) < = 0 ) <
if ( ( Ra.top — P ) < = R ) <
b.className = ‘stop’ ;
b. style .top = — R + ‘px’ ;
> else <
b.className = ‘sticky’ ;
b. style .top = P + ‘px’ ;
>
> else <
b.className = » ;
b. style .top = » ;
>
>
> ) ( )
< / script >
Вариант #2 (с jQuery)
Прописываем HTML-код в боковой колонке:
Подключаем скрипт. Перед
