Woocommerce Storefront - Галерея липких продуктов - PullRequest
Новая
       53

Woocommerce Storefront - Галерея липких продуктов

0 голосов
/ 18 апреля 2019

Я использую Storefront, тему Woo для Woocommerce. Я попытался сделать галерею изображений «липкой». В настоящее время содержит только 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-продукт-gallery__wrapper

WooCommerce-продукт-gallery__image

Ни одна из них не работает. Возможно, ответ заключается в увеличении высоты столбца галереи, но я бы хотел сделать это, не нарушая нормальную функцию галереи Витрины. Важно, если я добавлю несколько изображений позже.

Если кто-нибудь увидит очевидную проблему с элементами Storefront и Sticky, сообщите мне. Благодаря.

1 Ответ

0 голосов
/ 19 апреля 2019

Ответ пришел ко мне через 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;
}

Поэтому удалите соответствующий оператор переполнения (приведенный выше фрагмент работал для меня), а галерея Woocommerce / Storefront «залипает» в соответствии с моим первоначальным запросом SO .

Решено.

...