使单个产品页面图像粘性

Question

我正在尝试使单个产品页面图像具有粘性，并尝试针对许多不同的类别，但没有任何效果。

这是我尝试过的：

    #content div.product div.images, 
    div.product div.images, 
    #content div.product div.images, 
    div.product div.images,
    .woocommerce-product-gallery img,
    img, 
    .wp-post-image,
    .woocommerce-product-gallery__wrapper,
    .woocommerce-product-gallery__image,
    .woocommerce-main-image {
        position: sticky!important;
        top: 0;
}

也许有一些内联 jQuery 已经超越了。

这是 HTML :

    <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25s ease-in-out 0s;"><a href="#" class="woocommerce-product-gallery__trigger"><img draggable="false" role="img" class="emoji" alt="🔍" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f50d.svg"></a>
<div class="woocommerce-product-gallery__wrapper">
<div data-thumb="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg" data-thumb-alt="" class="woocommerce-product-gallery__image" style="position: relative; overflow: hidden;" data-o_data-thumb="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-100x100.jpeg"><a href="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-o_href="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg"><img width="600" height="542" src="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg" class="wp-post-image" alt="imac-24-no-id-blue-cto-hero-202310" title="imac-24-no-id-blue-cto-hero-202310" data-caption="" data-src="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-large_image="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-large_image_width="1254" data-large_image_height="1132" decoding="async" fetchpriority="high" srcset="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg 600w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-300x271.jpeg 300w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1024x924.jpeg 1024w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-768x693.jpeg 768w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1200x1083.jpeg 1200w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg 1254w" sizes="(max-width: 600px) 100vw, 600px" data-o_src="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg" data-o_height="542" data-o_width="600" data-o_srcset="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-600x542.jpeg 600w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-300x271.jpeg 300w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1024x924.jpeg 1024w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-768x693.jpeg 768w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310-1200x1083.jpeg 1200w, http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg 1254w" data-o_sizes="(max-width: 600px) 100vw, 600px" data-o_title="imac-24-no-id-blue-cto-hero-202310" data-o_data-caption="" data-o_alt="" data-o_data-src="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-o_data-large_image="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" data-o_data-large_image_width="1254" data-o_data-large_image_height="1132"></a><img role="presentation" alt="imac-24-no-id-blue-cto-hero-202310" src="http://local.local/wp-content/uploads/2024/04/imac-24-no-id-blue-cto-hero-202310.jpeg" class="zoomImg" style="position: absolute; top: -151.952px; left: -350.462px; opacity: 1; width: 1254px; height: 1132px; border: none; max-width: none; max-height: none; display: block;"></div> </div>
</div>

如何使用 CSS 或 jQuery 将产品页面图像粘在单个 woocommerce 产品页面上？

我尝试使用position:sticky;定位多个类但没有一个起作用。我需要图像保持固定在滚动上。我在这里看到这个问题，但没有得到解答 Woocommerce 单一产品页面上的粘性产品摘要

这可以在不编辑 HTML 的情况下实现吗？

Answer 1

通常，

position: sticky;

不起作用的原因是该元素是弹性项目。默认情况下，弹性项目已设置

align-self: stretch

。这可以防止元素拉伸整个高度时出现“粘滞”行为。如果是这种情况，您可以尝试将

align-items: start

设置为 Flex 容器元素，或将

align-self: start

设置为您希望粘性的元素。

请参阅此处的示例：https://codesandbox.io/p/sandbox/distracted-brahmagupta-bn6j8t

这可能不是您需要的答案，但希望为您提供另一种调查途径。