masegosa.alvaro

Site URL: https://www.similarspace.ca/saol-nua Hi All, I've been trying to resolve a scrolling issue on my split screen sticky scroll pages with absolutely no luck. I see you have some experience in this area, and I would really really appreciate any help! Our website: https://www.similarspace.ca/ I was provided a code snippet to create the split screen sticky layout. I adjusted the code to target all 8 of the pages we'd like to use it on. The split and sticky left column work just fine, but when you reach the following full width section it overlaps the text on the left-hand column when we'd actually like it to register when the text ends and become sticky to scroll with the right side. Pages affected are all the ones linked on our work page: https://www.similarspace.ca/work In the attached video I've walked you through the issue as it appears on the page 'saol-nua' and then how it should appear as displayed on the page 'enso'. For some reason, the scroll is working correctly only on this one page, and the remaining 7 run into the overlapping text issue. I don't have much coding experience, so there's a chance I've just mushed something up while trying to apply the text to multiple pages. Below is the code I have in place. I would love some help getting the scroll nailed down properly on all our work pages. /// SPLIT LAYOUT /// // #collection is the ID for a specific page // #collection-5fd247825d5a16174f514a4d, /* split layout example */ #collection-5fd3b8a3d018754912c7d361, /* saol nua */ #collection-5fd7c10e718a7b4790835611, /* enso */ #collection-5fd7c83d2d5c2d705758af21, /* iwo */ #collection-5fd12e5c5767704c6ef3fa9b, /* obabika */ #collection-5fd7d7ab0d8882116ba91933, /* hunter & hare */ #collection-5fd7e8077be9e476c9b382d9, /* fed */ #collection-5fd7eb3716b55c49c44392bf, /* wirth */ #collection-5fd7ebf262243e10b9ea2cb8 /* hanune */ { @media (min-width:900px) { .sections { display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-section { width: 100% !important; } // LEFT Section ID // section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */ section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */ section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */ section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */ section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */ section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */ section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */ section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ { width: 40% !important; margin-top: 0px; } // RIGHT Section ID // section[data-section-id="5fd247aa329e0a201fd99043"], /* split layout example */ section[data-section-id="5fd3c683b5127b6b8416ddf2"], /* saol nua */ section[data-section-id="5fd7c10e718a7b4790835615"], /* enso */ section[data-section-id="5fd7c83d2d5c2d705758af25"], /* iwo */ section[data-section-id="5fd2a76ef1e0381452c66c0e"], /* obabika */ section[data-section-id="5fd7d7ab0d8882116ba91937"], /* hunter & hare */ section[data-section-id="5fd7e8077be9e476c9b382dd"], /* fed */ section[data-section-id="5fd7eb3716b55c49c44392c3"], /* wirth */ section[data-section-id="5fd7ebf262243e10b9ea2cbc"] /* hanune */ { width: 60% !important; } .page-section >.content-wrapper { box-sizing: border-box !important; } } } // Make the LEFT Section Fixed // body:not(.sqs-edit-mode) { @media screen and (min-width:991px) { section[data-section-id="5fd247a6d060d56c49ab1038"], /* split layout example */ section[data-section-id="5fd3b8a3d018754912c7d363"], /* saol nua */ section[data-section-id="5fd7c10e718a7b4790835613"], /* enso */ section[data-section-id="5fd7c83d2d5c2d705758af23"], /* iwo */ section[data-section-id="5fd12feb4b6ed76e341672a6"], /* obabika */ section[data-section-id="5fd7d7ab0d8882116ba91935"], /* hunter & hare */ section[data-section-id="5fd7e8077be9e476c9b382db"], /* fed */ section[data-section-id="5fd7eb3716b55c49c44392c1"], /* wirth */ section[data-section-id="5fd7ebf262243e10b9ea2cba"] /* hanune */ { position: block; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; width: 100%; top: -1px; } } } Thank you!!!! 4943648_SplitScreenScroll-StickyLeftColumn.mov43.59 MB · 2 downloads

@oneagle were you able to figure this out? That code seems to work with text but not banner images? Any help is much appreciated!