Прилипающая шапка на сайт парой строчек

Иногда для решения проблемы на сайте, буквально можно написать пару строчек. И все, необходимое будет достигнуто – без расширений, дополнений. Например, вот на сайте на вордпрес заказчику понадобилось иметь шапку, которая при прокрутке бы прилипала к верху страницы.

Первое, что приходит в голову наверно любому разработчику под WordPress – это использовать плагин. И я уверен, что можно найти такой плагин. Наверняка можно будет ввести в этот плагин идентификатор шапки (или еще как-то её обозначить) и после изменения настроек и запуска – все заработает.

Однако, каждый новый плагин – это увеличенная настройка на сервер. Может быть, совсем немного, но все же каждый раз будет задействована какая-то часть ресурсов. Кроме этого, плагин надо найти и настроить – а нередко они на английском. Проверять обновления, поддерживать актуальность – нередко через устаревшие плагины происходит взлом сайта.

Отлично, но как же решить нашу задачу без плагина? Очень просто: в любое место добавляем виджет HTML-код. Можно, например, в самый низ в подвал. Но вообще, главное – после шапки и подключения jQuery. Код у нас будет такой:

window.addEventListener('scroll', function() {
if (window.scrollY > 200) {
jQuery("#masthead").css('position','fixed');
jQuery("#masthead").css('width','100%');
jQuery("#masthead").css('top','0');
}
else {
jQuery("#masthead").css('position','relative');
}		
});

У вас параметры могут быть другими. Во-первых, надо узнать «приклеиваемый» к верху элемент. В нашем случае это шапка с ид – masthead – у вас может быть другой. Также параметр 200 может быть и не таким. Можно добавить плавность прилипания к верху страницы и прочее – это все тоже несложно делается.



Обращу ваше внимание, что я не призываю полностью отказаться от готовых плагинов – в некоторых случаях они просто незаменимы. И почти всегда – очень удобны. Просто не так уж редко можно плагин заменить вот такой вот парой строчек, а результат будет не хуже. Пишите – любая помощь по WP и не только. Недорого и быстро.
заметки, javascript, WordPress