…от пользователей (в личку или комментах) поступают вопросы на предмет настроек элементов сайта — сегодня узнаем, как сделать прилепленный виджет у верхнего края окна браузера, но который будет отлепляться — пропадает фиксация как только блок виджета достигает подвала (либо указанной точки в элементах сайта).
Я уже много писал по этой задаче отработки сайдбара, однако, остаются вопросы. …в частности по виджетам… пользователи желают решать подобные задачи не прибегая к плагинам. И это правильно! хотя, в плагинах, если те рационально установлены, нет ничего плохого, но всё же… к чему использовать плагин, если можно обойтись без него!?
Итак: реализуем прилепленный виджет, который будет открепляться достигая подвала — заданной ID точки…
прилепленный виджет — плавающая фиксация без плагина
вот предыдущая статья, которая повествует о способах организации прилепленного виджета у верхнего края окна браузера (есть полезные комментарии). Рекомендую познакомиться, прежде чем решать нынешнюю задачу.
На самом деле можно очень тонко обыграть (настроить) отработку плавающих элементов сайта!
По шагам:
1 — Подключите jquery, если ещё не подключили (хотя, в наши времена, требуемые библиотеки в шаблонах уже подключены, однако, правильно ли??).
//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
…как правильно подключенить jQuery библиотеки от CDN Google — рационально!..
Если у вас в шаблоне — по каким-то странным, но необходимым требованиям — нежелательно подключать CDN Google, то возможно банально подключить вот эту библиотеку: jquery-1.12.4.min.js
…либо перекачать её в корень шаблона, либо с сервера Google, как-нить так:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
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>
якорной ссылкой, это важно ! фиксированный блок виджета (или чего-то ещё) как только достигнет имени этого якоря — отлепится; фиксация виджета будет отключена… отфиксируется виджет … как угодно!! короче — фиксация блока в заданной точке пропадёт))
Заместо якоря, что весьма логичнее, возможно просто добавить, скажем так, ID точки открепления фиксации блока виджета к любому требуемому div
классу шаблона и пр.
В скрипте 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>
Если у вас сайт не умеет работать с PHP в виджете, то воспользуйтесь этой статьёй, которая расскажет как сделать полезный текстовый виджет
как сделать текстовый виджет для работы с php и шорткодами.
Кстати, у меня есть плагин, который добавляет на сайт текстовый виджет, умеющий работать с php
и шорткодами.
Скачать его возможно в здесь
Плагин widget text class ats — обогащённый текстовый виджет для работы с php и шорткодами, либо в репозитории Вордпресс.
Ну что ж…
Основные организационные настройки заданы! осталось обыграть CSS, чтобы наш виджет фиксировался у верхнего края окна браузера, и откреплялся достигая подвала, например… ну или какой-то заданной точки (напоминаю: точка задаётся ID значением)
это будет полезно!
В статье подключения JS без перегрузок описаны наиболее правильные варианты подключения js файлов…
или виджеты WordPress — добавить и настроить абсолютно в любом месте сайта.
к оглавлению
стили 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 для более соответствующей стилистки вашего сайта — так как шаблоны у всех разные…
Если возникли вопросы по статье, спрашивайте… (быть может я не ясно изложил — писал на скорую руку)) но есть же комментарии…
…если у самих не получается организовать фиксированный виджет — вот страница моих услуг и там по ссылкам…
…решим волнующую вас задачу — запросто с Вордпресс…
mihalica.ru !