Jump to content

Sticky Scroll Split screen in fluid engine

Recommended Posts

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
 

Screenshot 2022-10-20 at 12.17.05.png

Edited by LisaLenkens
Link to comment

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

Screenshot 2022-10-20 at 12.17.05.png

Edited by LisaLenkens
Link to comment

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

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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

 

Edited by LisaLenkens
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...

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.