嘿，我只需要在桌面版中 fix/sticky 一个 div。不在移动版本中。所以请建议我如何粘贴 div

Question

enter image description here我只需要在桌面版中 fix/sticky 一个 div。不在移动版本中。基本上我在单个产品页面中有一个电子商务网站我想修复添加到购物车的部分粘性和人们滚动但该区域不会消失并且该部分总是通过用户滚动滚动你可以看到图像。你可以使用这个 link https://letronne.com/products/example-product?variant=34631988379799

Answer 1

解决方案取决于您希望如何检测移动设备，简单的解决方案可能是@media 具有特定的屏幕分辨率和设置 Position:fixed 如果匹配。
更稳定的解决方案是确定用户代理并通过 js/jQuery 设置 position:fixed。看看这里： What is the best way to detect a mobile device?

Answer 2

你好，你可以通过 JS 做到这一点。

if (screen.width >= 411){
 var element = document.getElementById("yourdiv");
 element.classList.add("yourstickyclass");
}

上述 JS 适用于 phone pixel2、三星 galaxy、iPhone 系列和摩托罗拉系列。

这是css方法

@media all and (min-width: 1200px) {
  .stickyclass {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0; //you need sticky at bottom use bottom:0
  } 
}

Answer 3

您需要做两件事。首先是改变位置粘到父亲工作（这里不像你那样工作）。其次是在 css 中使用“@media (min-width: InsertSizeHere)”来为桌面工作，像这样：

@media (min-width: 1200px) {
   .sticky-inner-wrapper {
        position: sticky;
        top: 0;
    }
}

嘿，我只需要在桌面版中 fix/sticky 一个 div。不在移动版本中。所以请建议我如何粘贴 div

Hey, I need to fix/sticky a div in desktop version only. Not in Mobile version. So Please suggest me how to stick a div

html

css

media

jquery

sticky