Фиксация карточки товара

Что фиксировать

Галерея остаётся на экране, пока покупатель читает информацию справа.

Отступы от края экрана

Верхний отступ учитывает фиксированное меню: при его высоте 80 px укажите 100 px. Нижний нужен для проверки, помещается ли выбранная часть на экране.

Размер экрана

На узких экранах и при расположении колонок друг под другом остаётся обычная прокрутка.

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

Код для Tilda

Как пользоваться генератором

С какими блоками работает

Генератор предназначен для ST205 — отдельной страницы товара, в опубликованной разметке использующей класс .t762. Нужна стандартная двухколоночная структура: галерея и информация о товаре. Всплывающие карточки каталога, Zero Block и другие блоки магазина не поддерживаются этой версией.

«Информация о товаре» — весь контейнер .t762__info: название, цена, параметры, кнопка покупки и описание, если оно находится внутри. Фиксация только цены или кнопки отдельно в эту модификацию не входит.

Шаг 1. Выберите часть карточки
  1. Выберите «Фотографии и галерея», если описание справа длиннее фотографий.
  2. Выберите «Информация о товаре», если фотографии занимают больше места, а информация справа короткая.
  3. Для применения на странице ко всем ST205 оставьте «Все блоки». Для конкретного блока выберите «Один блок по ID» и вставьте его ID из настроек Тильды.
Шаг 2. Настройте отступы и ширину

Укажите верхний отступ с учётом высоты фиксированного меню и желаемого зазора. Нижний отступ оставьте 20 px или измените. Выберите минимальную ширину экрана для фиксации. Код обновляется автоматически; нажмите «Скопировать код» или скачайте TXT.

Шаг 3. Установите код в Tilda
  1. Удалите прежний код фиксации этой же части карточки, если он уже установлен.
  2. Добавьте блок T123 «HTML-код» под ST205 и вставьте в «Контент» весь сгенерированный код, включая теги <script>.
  3. Сохраните и опубликуйте страницу. Проверяйте результат на опубликованном сайте.
  4. Прокрутите карточку, переключите фото и варианты товара. Проверьте страницу на большом и небольшом экране.

Для всех товаров используйте код в общем подвале сайта и опубликуйте страницы, где подключён этот подвал. Режим «Все блоки» действует на ST205 текущей страницы. Для разных настроек блоков создайте отдельные коды с разными ID. Не совмещайте общий код с кодом для одного блока.

Как работает фиксация

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

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

Если фиксация не появилась
  • Проверьте, что это ST205 с классом .t762, а не всплывающее окно каталога.
  • Убедитесь, что окно достаточно широкое, выбранная часть помещается по высоте, а соседняя колонка длиннее.
  • Уменьшите верхний отступ или вынесите длинное описание в отдельный блок ниже товара.
  • Проверьте ID блока, публикацию страницы и отсутствие другого кода фиксации. Если на выбранном элементе уже задано CSS-свойство translate, эта версия пропустит его, чтобы не перезаписать эффект.

Модификация опирается на разметку Тильды. После обновлений платформы и при нестандартных изменениях структуры карточки потребуется повторная проверка.

Сохрани вкладку в избранном, чтоб не потерять модификацию
Другие модификации:

    Закажите сайт на Тильде «под ключ»

    Давайте создадим что-то значимое вместе
    СВЯЖИТЕСЬ С НАМИ В ЛЮБОМ МЕССЕНДЖЕРЕ
    Мы на связи с понедельника по пятницу с 11:00 до 19:00 по МСК
    ИНН 644910511905
    2026, KETE DESIGN AGENCY – создание сайтов на Tilda