3

I have a button on my OpenCart (2.3.0.2) website with a sticky cart button. The idea is that there is only one page to order from (Just a few sandwiches, no categories and product page needed) so I added a cart button that stays on the top right of the page:

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

This works on the desktop site but on mobile I get the following when scrolling:Button on mobile As you can see on the top right, the button scrolls up a bit. After this the button scrolls with the page.

Are there any fixes for this issue?

Cas Bekhuis
  • 71
  • 1
  • 9

3 Answers3

6

This is related to the issue at Position fixed on chrome mobile causing element to move on scroll up/down

Solution:

<meta name="viewport" content="minimum-scale=1">
Tamilarasu
  • 341
  • 2
  • 7
2

This is the first that comes up for "position sticky not working on mobile"

But only this helped me resolve my problem:

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">
iorgv
  • 787
  • 2
  • 11
  • 26
0
#cart {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  right:0;
}

Have you tried position sticky rather than fixed?

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Beth
  • 13
  • 3