Woocommerce 店面 - 粘性产品页面库

Question

我正在使用 Storefront，这是 Woocommerce 的“Woo”主题。我试图让图片库“有粘性”。目前仅包含 1 项。我的计划是让这个项目沿着产品页面描述/添加到购物车部分向下滚动，这在我的网站上非常复杂且冗长。

我的网站目前没有上线，所以这里是店面演示： https://themes.woocommerce.com/storefront/product/lowepro-slingshot-edge-250-aw/

我在这里使用了 Sticky 的基本解释： https://www.w3schools.com/howto/howto_css_sticky_element.asp

并尝试应用它，逻辑上我想，就像这样

.woocommerce-product-gallery {
position: sticky!important;
top: 0!important;
}

这不起作用，所以我尝试针对各种其他元素：

woocommerce-product-gallery__wrapper

woocommerce-product-gallery__image

都不行。也许答案是扩展该画廊栏的高度，但我希望在不破坏店面画廊的正常功能的情况下做到这一点。如果我以后应该添加多张图片，这一点很重要。

如果有人能看到 Storefront 和 Sticky 项目的明显问题，请告诉我。谢谢。

Answer 1

答案来自http://dinbror.dk/blog/help-css-position-sticky-doesnt-work-solved/

Woocommerce（或者可能是 Storefront）正文在几个地方有上述溢出用法。

body.single-product,
body.single-product #page,
body.single-product .product {
overflow: visible!important;
}

因此，按照我原来的 SO 查询，删除相关的溢出语句（上面的 sn-p 对我有用）和 Woocommerce / Storefront 画廊“棒”。

已解决。