我的 OpenCart (2.3.0.2) 网站上有一个带有粘性购物车按钮的按钮。这个想法是只有一个页面可以订购(只有几个三明治,不需要类别和产品页面),所以我添加了一个位于页面右上角的购物车按钮:
#cart {
position: fixed;
top: 0;
right: 0;
}
这适用于桌面网站,但在移动设备上滚动时我会看到以下内容: 正如您在右上角看到的,该按钮向上滚动了一点。此后按钮将随页面滚动。
这个问题有解决办法吗?
这是第一个出现的“位置粘性不适用于移动设备”
但只有这样才能帮助我解决我的问题:
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi">
编辑:
好消息:这也可以在没有:
user-scalable=no
的情况下工作!谢谢你Umut指出了这一点。
#cart {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
right:0;
}
您尝试过位置粘性而不是固定吗?
粘性元素根据滚动位置在相对和固定之间切换。它相对定位,直到在视口中满足给定的偏移位置 - 然后它“粘”在适当的位置(如位置:固定)。