Блог Perkova&Perkova

Фиксированное меню перекрывает заголовок: настройка якорного перехода

После перехода по якорю раздел может начинаться под закреплённой шапкой. Ссылка попала в нужное место, но заголовок оказался за меню. Сначала нужно определить высоту перекрытия и положение якоря, затем изменить посадку перехода. Замена текста ссылки эту геометрическую проблему не решает.

Различайте два случая

Откройте опубликованную страницу и нажмите пункт меню. Если виден совсем другой раздел, проверяйте адрес и повторяющиеся якоря. Если видно начало нужного текста, а его заголовок скрыт сверху, проверяйте фиксированное меню. Сравните тот же раздел после обычной прокрутки.

В учебном примере меню занимает примерно 64 пикселя на компьютере. Заголовок начинается почти сразу после якоря. На телефоне высота шапки отличается, поэтому настройка по одному экрану будет неполной. Измеряйте именно видимую шапку после прокрутки: она может отличаться от состояния на обложке.

Простой способ: якорь перед отступом раздела

  1. Добавьте T173 непосредственно перед блоком с заголовком. В «Контенте» задайте имя, например project-stages.
  2. Измените ссылку пункта меню на #project-stages. Уберите одноимённый якорь с прежнего блока, чтобы цель была единственной.
  3. В настройках следующего текстового блока увеличьте верхний отступ так, чтобы между якорем и заголовком помещалась шапка и небольшой просвет. Для учебной шапки 64 пикселя начните с 90 пикселей и уточните по опубликованному результату.
  4. Проверьте мобильный вариант отступа. Оставьте достаточно места для мобильной шапки, сохраняя разумный интервал между разделами.
  5. Опубликуйте страницу и повторите переходы. Изменение должно сделать заголовок видимым, а не просто увеличить пустое место в редакторе.

Этот вариант меняет и обычное расстояние между блоками. Он удобен, когда такой отступ соответствует композиции страницы. Для сложной плотной вёрстки потребуется отдельное техническое решение с проверкой текущего механизма прокрутки; случайный CSS из другой страницы может не влиять на скриптовый переход Tilda.

Проверьте модификатор и закрепление

Официальная справка по якорям описывает T173 и T178 для плавного перехода. Если используете T178, оставьте один экземпляр и проверяйте именно с ним: нативный прыжок и анимированный скролл могут дать разные результаты при дополнительных скриптах.

В базовом меню ME301N закрепление задаётся через «Основные настройки» → «Поведение позиционирования» → «Фиксация при скролле». Для Zero Block используется Position and Overflow → Fixed. Это настройки поведения шапки, а не универсальный регулятор отступа якоря.

Приёмка после изменения

Проверьте переход с начала страницы, из середины материала и по прямому URL с якорем. На телефоне сначала раскройте меню, выберите раздел и убедитесь, что раскрытая панель закрылась и не закрывает содержание. Затем проверьте поворот экрана и увеличение текста.

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

Полезны инструкции про якорное оглавление и мобильное меню. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.

Практика Tilda