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

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

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

Итак: реализуем прилепленный виджет, который будет открепляться достигая подвала – заданной 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 для более соответствующей стилистки вашего сайта – так как шаблоны у всех разные…

 

 

 

 

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