! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !
— отредактировано:  2017-06-20
издатель:   в теме: В теме: Без плагинов  реплики: будьте первым в диалоге
 
Запросто с WordPress - студия занимательная МИХАЛИКА

Организуем прилепленный виджет, или — фиксированный у верхнего края окна браузера

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

Для реализации фиксированного сайдбара, всего-то потребуется: 1 — создать небольшой js файл в корне своего шаблона и подключить его к функционалу темы (в футере — footer.php), и второе — настроить определённый виджет (а точнее — его информационную часть, заключённую в idентификатор).

Всё это чудо будет работать на чистейшем js, без плагинов — подробнее ниже:


приступим:

 

как сделать фиксированный виджет

 

 

 

Преимущества и недостатки:

 

отличие нынешнего варианта прилепленного (фиксированного) виджета от решений с какими-то плагинами, это то, что в нашем случае фиксируется ID-содержимое текстового виджета — точнее, только помещённая в id-блок информация.

Не сам виджет (не знаю, может кого-то запутал, но, думаю, далее по тексту станет ясно).

 

 

 

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

 

 

 

 

Заходим в ядро (директорию) своего шаблона, отыскиваем папку js и в ней создаём js-файл с именем:

 

 

fixsidy-vidsh.js

 

 

Затем пишем и помещаем в него следующий скрипт js.

 

 

function getTopOffset(e) {
var y = 0;
do { y += e.offsetTop; } while (e = e.offsetParent);
    return y;
}

var block = document.getElementById('sydy-fix'); /* блок рекламы НА ЧИСТОМ JS - sydy-fix - значение атрибута id блока */
    if ( null != block ) {
    var topPos = getTopOffset( block );
    window.onscroll = function() {
    var newcss = (topPos < window.pageYOffset) ?
    'top:8px; position: fixed;' : 'position:static;';
    block.setAttribute( 'style', newcss );
  }
}

 

 

 

Пояснения:

 

sydy-fix — это идентификатор блока виджета, в который завёрнут, скажем код рекламы.

 

Такая примерно конструкция id блока размещённого в текстовом виджете:

 

<div id="sydy-fix">

Какой-то код...

</div>

 

top:8px — регулятор отступов от верхнего края.

 

 

 

Полдела — готово!

 

 

Далее нужно подключить к id блоку скрипт обработчик, который мы создали чуть выше…

 

 

Открываем файл темы footer.php и перед закрывающим тегом </body> размещаем следующую строку:

 

 

<script type='text/javascript' src='/wp-content/themes/ваш_шаблон/js/fixsidy-vidsh.js'></script>

 

 

Далее, и это важно обозначить — сказать, что наша работа успешно закончена! ))

 

 

 

 

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

 

 

 

 

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

 

В самом деле: в наш век мобильного интернета — это серьёзная проблема. А значит целесообразнее настроить регулируемую фиксацию в зависимости от расширения экрана.

 

 

Поступим так:

 

заместо строки, показанной выше, пропишем в футере такую:

 

 

<script> if (document.body.clientWidth>1023) {document.write("<script type='text/javascript' src='/wp-content/themes/ваш_шаблон/js/fixsidy-vidsh.js'><\/script>");}</script>

 

 

 

…что имеем:

 

document.body.clientWidth>1023 — ширина экрана, при которой фиксированный виджет отрабатывается в обычном режиме: т.е. как и все съезжает за верхние границы браузера — без фиксации.

Ширину, меняя значения строки, настраиваете такой, которая необходима конкретно вам.

 

 

 

…а на этом…

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 


mihalica.ru

 

 

…если возникли вопросы, задавайте — есть же комментарии…

 

 


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

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
ещё статьи по теме:

меточная навигация:


Комментарии © 0 к статье: Организуем прилепленный виджет, или — фиксированный у верхнего края окна браузера

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

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

 для диалога необходимо принять правила кофиденциальности *
Яндекс.Метрика