Split Sticky Section On Product Pages/Regular Pages

Site URL: https://www.aaline.ca/beta-product-page-v3

Hi,

I have a question regarding making a split sticky section on product pages. Here is the page:https://aaline.ca/beta/linear-embedded-azw3l       I'm trying to keep the product image sticky, while the left side scrolls down and shows the dropdowns with more product information.

However, if that is not possible I've been trying to implement the same thing, but on a regular blank page: https://www.aaline.ca/beta-product-page-v3  I've tried using CSS code from another forum post, but it did not work. 

I would appreciate any help I can get. Thank you!

Quote

section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper {
        padding: 0;
        margin: 0;
        max-width: unset;
}
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content {
  width: 100% !important;
}
/* Assume you got span-6 image column added*/
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: calc(6vw + 29px);
}
/* I want to make sure image is shorter than content */
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure > div {
    padding-bottom: 50% !important;
}
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure img {
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

2 hours ago, KatyaK said:

Site URL: https://www.aaline.ca/beta-product-page-v3

Hi,

I have a question regarding making a split sticky section on product pages. Here is the page:https://aaline.ca/beta/linear-embedded-azw3l       I'm trying to keep the product image sticky, while the left side scrolls down and shows the dropdowns with more product information.

However, if that is not possible I've been trying to implement the same thing, but on a regular blank page: https://www.aaline.ca/beta-product-page-v3  I've tried using CSS code from another forum post, but it did not work. 

I would appreciate any help I can get. Thank you!

 

hi. below code is for the product page.
.ProductItem-gallery { 
position: -webkit-sticky;
    position: sticky;
top: 0;
}

Thank you! it works!