Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Split Sticky Section On Product Pages/Regular Pages


KatyaK

Question

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;
}

 

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0
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;
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...