. Пример (использует $):
```
```
Объяснение логики:
- Вычисляем исходную позицию навигации: offset().top и запоминаем её как точку переключения (в примере к ней добавлено +288 для компенсации смещения).
- На событии scroll проверяем текущую позицию прокрутки.
- Если страница прокручена ниже точки, ставим навигацию в position: fixed; иначе возвращаем position: static.
Два важных замечания к коду:
- +288 в расчёте добавлен для фиксации бага, когда sticky‑состояние срабатывало слишком рано. Это костыль: в разных темах может не потребоваться — лучше понять структуру DOM и убрать «магическое» число.
- Чтобы навбар не менял ширину при переходе в fixed, задайте для него фиксированную ширину в CSS или вычисляйте текущую ширину и присваивайте её при переключении.
После этих правок навигация должна «прилипать» к верху экрана при прокрутке.
## Критерии приёмки
- Навигационная панель остаётся видимой и фиксируется в верхней части окна после прокрутки вниз.
- Поисковая форма отображается внутри навбара и остаётся функциональной.
- Ширина навигации не меняется при переключении в fixed.
- Скрипт не вызывает заметных просадок FPS при прокрутке.
## Альтернативные подходы
1. Чистый CSS (position: sticky)
- Подходит, если навбар изначально находится в потоке документа и вы можете сделать его верхним элементом контейнера. Прост: .nav { position: sticky; top: 0; }
- Ограничение: не поддерживает старые браузеры и не подходит, если элемент изначально не в потоке.
2. Vanilla JavaScript
- Тот же принцип, но без зависимости от jQuery. Событие scroll, getBoundingClientRect() и classList.toggle(). Рекомендуется для производительности и меньшего веса.
3. Плагины и готовые решения
- Для WordPress существуют плагины с опциями («sticky menu», «my sticky menu»), они минимизируют ручной код, но добавляют зависимость и могут конфликтовать с темой.
4. Intersection Observer API
- Современный и производительный способ: отслеживать появление/скрытие опорного элемента. Лучше производительность по сравнению с обработчиком scroll.
## Когда подход может не сработать
- Если тема активно меняет DOM (динамически перестраивает навигацию) — то простая привязка к #access может потерять ссылку.
- Если в теме используются сложные позиции с transform или overflow на родителях — offset().top может давать неправильные значения.
- В старых браузерах без поддержки position: fixed или с нестабильной работой JS могут возникнуть артефакты.
## Чек-листы по ролям
Для разработчика:
- [ ] Скопировать/обернуть NAV в #access_container.
- [ ] Переместить внутрь NAV.
- [ ] Обновить CSS для #branding #searchform.
- [ ] Подключить jQuery (по wp_enqueue или напрямую).
- [ ] Добавить скрипт sticky и протестировать на мобильных и десктопах.
Для дизайнера:
- [ ] Проверить адаптивность (mobile-first) и вид поиска в маленьких экранах.
- [ ] Определить поведение перекрытия контента (z-index).
- [ ] Подготовить варианты для состояния fixed (тень, фон).
Для тестировщика:
- [ ] Протестировать в Chrome, Firefox, Safari, Edge.
- [ ] Проверить высокую частоту прокрутки и производительность.
- [ ] Убедиться в корректной работе клавиатурной навигации и доступности (ARIA).
## Сводный мини‑чек‑шит (фрагменты кода)
1) Обёртка в header.php:
```
```
2) CSS для формы поиска:
```
```
#branding #searchform {
float:left;
background:white;
margin:7px ;
}
3) jQuery (простой пример):
```
```
Используйте эти фрагменты как основу. Рекомендуется вынести JS в отдельный файл и подключать через wp_enqueue_script с зависимостью от jquery.
## Несколько советов по производительности и безопасности
- Не выполняйте тяжёлых вычислений в обработчике scroll; используйте throttle/debounce или requestAnimationFrame.
- Избегайте частых изменений layout: при возможности меняйте только классы, а не inline‑стили.
- Если подключаете jQuery из CDN, используйте протокол-агностичный URL (//) или HTTPS.
## Совместимость и миграция
- jQuery 1.8 в примере устарела; на современных сайтах используйте версию, поставляемую WordPress, и проверяйте noConflict.
- При миграции на новый дизайн проверьте, что id и классы (#access, #access_container) не переопределяются.
## Короткое объявление для блога (100–200 слов)
На MakeUseOf мы внедрили плавающую навигацию с поиском — это увеличило внутренние переходы и улучшило юзабилити. В этом руководстве показано, как в теме WordPress переместить форму поиска в навигацию и закрепить меню вверху при прокрутке с помощью простого jQuery‑скрипта. Приведены фрагменты кода для header.php и style.css, обсуждены альтернативы (position: sticky, Intersection Observer, vanilla JS), а также приведены рекомендации по производительности и совместимости. Подойдёт как для фиксированных, так и для адаптивных макетов после небольшой доработки. Если хотите, выложите ссылку на свой сайт в комментариях — посмотрю и подскажу правки.
## 1‑строчный глоссарий
- offset().top — расстояние сверху страницы до элемента; используется для вычисления точки переключения.
- position: fixed — фиксирует элемент относительно окна браузера.
- position: sticky — гибридный режим, элемент «прилипает» при достижении top.
## Социальный превью (предложение)
OG title: Липкая шапка сайта с jQuery — пошагово
OG description: Научитесь закреплять навигацию и встроить поиск в шапку сайта. HTML/CSS/JS‑фрагменты и альтернативы.
## Итог
- Переместите форму поиска в навбар, подправьте CSS и добавьте JavaScript для переключения в fixed при прокрутке.
- Рассмотрите альтернативы: position: sticky, Intersection Observer, vanilla JS.
- Тестируйте на разных устройствах, минимизируйте работу в обработчике scroll и используйте throttle/debounce.
Если нужна помощь с конкретной темой WordPress или желаете пример на чистом JavaScript, приложите ссылку на код или URL — я помогу адаптировать.
