Sticky Scroll Split screen in fluid engine

Hey, 

I would love to create this scrolling effect in one column in fluid engine. 
see https://nayatraveler.squarespace.com/journeys-peru-walking as example.
I've got this so far https://bat-parakeet-pken.squarespace.com/, password: testing.

which works, but it messes up my editor mode and can't edit properly. 

I know a lot of questions have been asked, but haven't found the right solution for this in fluid engine. 

Appreciate the help!

Thanks
 

Try one of these links:

https://www.will-myers.com/products/p/split-screen-layout-design-pack

https://www.squarekicker.com/letsmakethis/stickysplit

Thanks! I don't want to rely on a plugin, as I have the desired result in the website, but just the editor that is messed up a bit. It looks like it takes up the space from the 'sticky' element and then the content begins after that, which makes the content boxes in the editor overflowing / move to the bottom of their boxes. see screenshot. 

Ideally I would like to have a line of code to unset this sticky element just for the edit mode. 
I found the classes .is-editing and .sqs-edit-mode-active. Any ideas for this? Thanks

I'm not sure what code you're using, but you could try this:

@media only screen and (min-width: 768px) {
 .fe-block-yui_3_17_2_1_1666291546789_152701 {
    position: sticky;
    top: 100px;
 }
}

Found the solution!!! 

Here is my piece of code to make split screen scrolling in fluid engine + normal in editor mode. See full tutorial on https://lisalenkens.com/split-scroll-screen-sticky-column/
Hope it will help someone else as well!

@media only screen and (min-width: 700px) {
.page-section:nth-child(2) {
  display: flex;
  flex-direction: row;
}

.page-section:nth-child(2) div:nth-child(2) {
  position: sticky !important;
  top: 80px !important;
} 
  
.page-section:nth-child(2) .is-editing  div:nth-child(2)  {
  position: absolute !important;
  top: 0px !important;
}
  
}