CSS Sticky Position не работает должным образом на мобильном телефоне

Question

У меня есть кнопка на моем сайте OpenCart (2.3.0.2) с кнопкой прикрепленной корзины. Идея состоит в том, что заказывать можно только одну страницу (всего несколько бутербродов, не нужны категории и страница продукта), поэтому я добавил кнопку корзины, которая находится в правом верхнем углу страницы:

#cart {
    position: fixed;
    top: 0;
    right: 0;
}

Это работает на настольном сайте, но на мобильном телефоне при прокрутке я получаю следующее: Как видно в правом верхнем углу, кнопка немного прокручивается вверх. После этого кнопка прокручивает страницу.

Есть ли какие-либо исправления для этой проблемы?

Answer 1

#cart {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  right:0;
}

Вы пробовали положение «липкий», а не фиксированный?

Липкий элемент переключается между относительным и фиксированным, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не будет достигнута заданная позиция смещения - затем он «залипнет» на месте (как позиция: фиксированная).