возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2022-03-31 в теме: Сниппеты, хаки, функции
Запросто с WordPress создание и продвижение сайтов ATs media

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

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

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

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

 

 

 


подписка feedburner 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 в виджете, то воспользуйтесь этой статьёй, которая расскажет как сделать полезный текстовый виджетвиджет: widget text class
как сделать текстовый виджет для работы с php и шорткодами
.

Кстати, у меня есть плагин, который добавляет на сайт текстовый виджет, умеющий работать с php и шорткодами.

Скачать его возможно в здесьПлагин widget text class ats — текстовый виджет для работы с php и шорткодами
Плагин widget text class ats — обогащённый текстовый виджет для работы с php и шорткодами
, либо в репозитории Вордпресс.

 

 

 

 

Ну что ж…

 

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

 

 

 

это будет полезно!

 

В статье подключения JS без перегрузок описаны наиболее правильные варианты подключения js файлов…

 

или виджеты WordPress — добавить и настроить абсолютно в любом месте сайта.

 

 

 

 

к оглавлению

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

 

 


mihalica.ru

 

 


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

 

 

Добавьте эти примерные стили к себе в файл стилей 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 !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©