Прилепленный виджет, – отключение фиксации виджета в заданной точке…

…от пользователей (в личку или комментах) поступают вопросы на предмет настроек элементов сайта – сегодня узнаем, как сделать прилепленный виджет у верхнего края окна браузера, но который будет отлепляться – пропадает фиксация как только блок виджета достигает подвала (либо указанной точки в элементах сайта).

Я уже много писал по этой задаче отработки сайдбара, однако, остаются вопросы. …в частности по виджетам… пользователи желают решать подобные задачи не прибегая к плагинам. И это правильно! хотя, в плагинах, если те рационально установлены, нет ничего плохого, но всё же… к чему использовать плагин, если можно обойтись без него!?

Итак: реализуем прилепленный виджет, который будет открепляться достигая подвала – заданной ID точки…

 

 

 

 

прилепленный виджет – плавающая фиксация без плагина

 

 

 

 

 

 

 

По шагам:

 

 

1 – Подключите jquery, если ещё не подключили (хотя, в наши времена, требуемые библиотеки в шаблонах уже подключены, однако, правильно ли??).

 

 

//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

 

 

…как правильно подключенить jQuery библиотеки от CDN Google — рационально!..

 

 

 

 

 

 

2 – создадим в корне активного шаблона (в папке JS) файл js с именем, скажем, fixsidy-sidy.js –

 

…имена могут быть произвольными как в скрипте, так и в css – только нужно быть внимательнее, переименовывая…

 

 

В созданный файл помещаем такой скрипт:

 

 

/** ФИКС виджет КАК ТОЛЬКО ДОХОДИТ до подвала - открепляется и идёт кверху */
$(function(){
var a = document.querySelector('#sydy-fix-reclamy'), b = null, P = 0; // ID блока контейнера который требуется отработать
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('overflow') == 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]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
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-widgets').getBoundingClientRect().top); // селектор блока к примеру: <a id="footer-widgets">, при достижении нижнего края которого нужно открепить прилипающий элемент
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop-sydyss';   // стили CSS - стоп прилипание
b.style.top = - R + 'px';
} else {
b.className = 'sticky-sydyss'; // стили CSS прилипания
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width // дочерние стили ширины
}, false);
}
})()
/** ФИКС виджет у верх края и свободный от подвала */

 

 

 

 

блок плавающего виджета – отключение фиксации виджета в заданной точке

 

 

 

Воспользуемся  <a id="footer-widgets"></a> якорной ссылкой, это важно ! фиксированный блок виджета (или чего-то ещё) как только достигнет имени этого якоря – отлепится; фиксация виджета будет отключена… отфиксируется виджет … как угодно!! короче – фиксация блока в заданной точке пропадёт))

 

 

 

 

 

 

В скрипте js я дал кое-какие пояснения (комментарии), смотрите…

 

 

 

Пропишите якорь, либо ID (путём тестирования) в требуемую точку файла шаблона, например, в футер.

 

Словом, внедрите его где-то между кодом элементов подвала. таким образом, как только виджет достигнет этого ID – фиксация деактивируется. Виджет как ни в чём не бывал поедет вместе со всеми элементами кверху, не загораживая блоки подвала…

 

 

 

 

подключаем созданный js файл управления фиксацией плавающего виджета

 

 

 

 

Эту строку нужно добавить куда-то, например, в файл footer.php (в тот файл, который отвечает за организацию подвальной части сайта и где обычно подключают js).

 

А вообще, как правильно подключить файлы js см. по ссылке ниже.

 

 

<script src='/wp-content/themes/имя_темы/js/fixsidy-sidy.js'></script>

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

отключение фиксации виджета на маленьком экране гаджета

 

 

 

…если же вам нужно, чтобы фиксация виджета и, соответственно, его открепление… пропадало на маленьких расширениях экранов (маленьком разрешении экрана), то поступите так – добавьте эту строку:

 

 

<script> if (document.body.clientWidth>778) {document.write("<script src='/wp-content/themes/имя_темы/js/fixsidy-sidy.js'><\/script>");}</script>

 

 

где document.body.clientWidth>778 – ширина при которой открепление/прикрепление пропадает на малых расширениях телефонов…

 

 

 

 

3 – поместите требуемый для фиксации блок виджета (либо сам виджет) в указанный в коде выше ID-ентификатор.

У нас это: #sydy-fix-reclamy

 

 

<div id="sydy-fix-reclamy">

Какой-то код... например, виджет - или блок помещённый в виджете...

</div>

 

 

 

 

 

 

 

 

Ну что ж…

 

Основные организационные  настройки заданы! осталось обыграть CSS, чтобы наш виджет фиксировался у верхнего края окна браузера, и откреплялся достигая подвала, например… ну или какой-то заданной точки (напоминаю: точка задаётся ID значением)

 

 

 

 

 

 

 

стили css фиксированного виджета

 

 

 

 

МИГ подписки - ВРЕМЯ знаний!!

 

 

Добавьте эти примерные стили к себе в файл стилей style.css активного шаблона:

 

 

#sydy-fix-reclamy{max-width:352px;padding:24px 0 } // задаём размеры фиксированного блока

.sticky-sydyss{position:fixed;z-index:101;top:2px!important } // организация фиксации вверху

.stop-sydyss{position:relative;z-index:101 } // отключение фиксации в заданной точке

 

 

Возможно, вам придётся как-то поработать с CSS для более соответствующей стилистки вашего сайта – так как шаблоны у всех разные…

 

 

 

 

Если возникли вопросы по статье, спрашивайте… (быть может я не ясно изложил – писал на скорую руку)) но есть же комментарии…