Привет!
Недавно моему знакомому понадобилось сделать плавающий виджет в сайдбаре. То есть, чтобы при скролле страницы виджет в сайдбаре был всегда в поле зрения экрана. Немного подумав, я решил обратиться к плагинам. И нашел очень простое, но прекрасное решение!
Плагин называется: Q2W3 Fixed Widget. Он идеально подойдет тем людям, которые в сайдбарах любят размещать важную информацию (какие-либо документы, важные ссылки, спец предложения и прочее).
Переходим в админке в пункт Плагины -> Добавить новый, далее вписываем: Q2W3 Fixed Widget, после чего устанавливаем и сразу активируем.
Что делать если виджет налезает на футер?
Теперь наша задача состоит вот в чем. Нам надо определить нижнюю границу, до которой виджет будет скользить. По умолчанию он налезает на футер, обрезается и в итоге мы не видим ни половину футера, ни половину виджета. Решается это очень просто!
Переходим в настройки, а именно: Внешний вид ->Фикс. виджеты. Здесь нам предлагают вставить идентификатор элемента, приближаясь к которому необходимо остановиться. В нашем случае это футер. Посмотрите на исходный код Вашего сайта. Сделать это можно либо в браузере, либо открыв файл footer.php, который находится в папке с темой (wp-content/themes/название_вашей_темы).
Так вот, подвал сайта, называемый футером, чаще всего имеет структуру похожую:
<footer id="footer">
Однако в старых версиях шаблона чаще встречается обычный <div>. В любом случае надо узнать, какой блок и есть наш футер. Нам нужен его айди (то, что указано: id="footer"). Если такового нет, а вместо него только class или вообще ничего - достаточно добавить. Например:
<!-- Если используется footer, то добавляем айди с нашим значением --> <footer id="my_value"><!-- Простой div будет выглядеть так --> <div id="my_value">
В этом примере значение, которое нам нужно - my_value. Можете вместо него написать какое угодно. В моем случае это footer.
Возвращаемся к настойкам, вписываем наше значение в поле: Стоп ID.
Теперь при прокрутке в самый низ виджет будет останавливаться перед тем блоком, который мы указали. А указать можно абсолютно любой блок по той же схеме, что я описал выше. Просто зачастую это именно футер.
Как сделать фиксированный виджет в сайдбаре?
Осталось самое легкое - переходим во Внешний вид -> Виджеты, выбираем текущие, или ставим новые, и видим, что внизу появился чекбокс (поле, куда можно поставить галочку) с надписью: "Зафиксировать виджет". Устанавливаем галочку, сохраняем, и все! Наш виджет теперь плавает вслед за страницей, и всегда у нас на виду!
Можно ли обойтись без плагина?
Конечно! Можно написать скрипт, но в данном случае я бы советовал воспользоваться именно плагином. Скрипт даст ограниченную возможность, во-первых, надо будет указывать какие конкретно виджеты делать фиксированными, а какие нет. А для этого придется лезть в код. Во-вторых, надо будет правильно и кроссбраузерно просчитывать расстояние до стоп-блоков. Делать это не сложно, но муторно, и я предпочитаю отказываться от рутины. В данном случае использование плагина не противопоказано, а даже наоборот.
Ну как, получилось?