css - 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 items 的明显问题，请告诉我。谢谢。

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 查询，删除相关的溢出语句(上面的代码片段对我有用)和 Woocommerce/Storefront 画廊“坚持”。

已解决。