Jump to content

Help making text blocks sticky as I scroll.

Recommended Posts

Hello!

I want to make the text sections sticky on the left-hand side of my case study pages on desktop only. 
So the text on the left (heading, body and subheadings) will stick in place as I scroll down the page but won't overlap the footer at the bottom. I want to do this for all 5 case studies on the site. 

Here is the link for the case study in the screenshot. 
alexdrabsch.com/heartofgold

The password for the site is: forest

Any help would be much appreciated.
Thank you!

Screen Shot 2023-04-10 at 10.23.07 am.png

Link to comment
  • Replies 1
  • Views 238
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try adding to Design > Custom CSS

/* Sticky text box */
@media screen and (min-width:768px) {
.fe-block-8de6e9fe99733296ff6e, .fe-block-2e8f5cf4cf285063162f, .fe-block-ba7ff16cfbc49e351184 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.fe-block-2e8f5cf4cf285063162f {
    top: 75px;
}
.fe-block-ba7ff16cfbc49e351184 {top: 400px;}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.