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

Я использую 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-product-gallery__wrapper

woocommerce-product-gallery__image

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

Если кто-то видит очевидную проблему с витриной и липкими предметами, дайте мне знать. Спасибо.


css woocommerce sticky storefront
person Callum    schedule 18.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Решено.

person Callum    schedule 18.04.2019