Jump to content

Split Sticky Section On Product Pages/Regular Pages

Recommended Posts

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
  • Replies 2
  • Views 412
  • Created
  • Last Reply
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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.