Sticky Column With Overflow for Blog Posts

Looking for help with a blog post layout. I'd like the first column (text) to stop scrolling when the end of it's content is reached while the second column (images) continues scrolling. Any help would be very much appreciated!

Website HERE
password: mochimochi 

Try adding to Design > Custom CSS

@media screen and (min-width:901px) {
div#item-6456b25b81a7df1f2bce5560 .span-5 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 9999;
}
}

14 hours ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (min-width:901px) {
div#item-6456b25b81a7df1f2bce5560 .span-5 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 9999;
}
}

 

Looks amazing, @tuanphan  any way to make the code applicable to all blog posts, not just the one? Thank you!!

Each page has a different structure, try this, but I'm not sure it will work with all posts

@media screen and (min-width:901px) {
.blog-item-content .sqs-layout.columns-12 .span-5 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 9999;
}
}

6 hours ago, tuanphan said:

Each page has a different structure, try this, but I'm not sure it will work with all posts

@media screen and (min-width:901px) {
.blog-item-content .sqs-layout.columns-12 .span-5 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 9999;
}
}

 

Seems to work for all posts @tuanphan !! Although the left column sticks halfway and continues after additional scrolling. Any way to make scrolling seamless to stick at the end of the content only?

Hi,

I don't know this.

16 hours ago, tuanphan said:

Hi,

I don't know this.

No problem, tinkering with it. I'm thinking the solution isn't sticky now... Trying to get both columns to scroll together until aligned at baseline, as seen on THIS SITE for example. Inspecting their code shows a fixed position column with variable top...

Thank you for your help @tuanphan !