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

В продолжение цикла статей о 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'); /* 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 );
  }
}

 

 

 

 

 

 

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

 

 

Далее нужно подключить к 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 – ширина экрана, при которой фиксированный виджет отрабатывается в обычном режиме: т.е. как и все съезжает за верхние границы браузера – без фиксации.

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

 

 

 

…а на этом…

 

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

 

 

 

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

 

 

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