Make Text in Section Sticky While Rest of Text Scrolls Until The Next Section

Site URL: https://beeline-consulting.squarespace.com/organisational-design

Hi all- Thanks in advance for your help🙏.  I am trying to work out how to make my title text sticky in a section.

On this particular page, I would like the title text that says "Company Vision & Core Values" (in the Section= section[data-section-id="610b6b55c690502bba666c4a"]) to stay fixed at the top while the rest of the text in that section scrolls. I want to make sure that the title text has the same background color as the section so that the scrolling text is readable and then disappears once it reaches the title text (as opposed to getting overlayed on the title text). 

Then once you get to the bottom of that section, you just keep scrolling to the next section (and the "Company Vision & Core Values" title text is no longer fixed). 

The title text I am trying to make sticky is highlighted in the red box in the screenshot.  It's safe to say I have really no clue what I am doing here so I appreciate it being explained as elementary as possible! Thanks.

password= helpmeplease

Thank you!

On 8/5/2021 at 6:55 PM, Beeline said:

Site URL: https://beeline-consulting.squarespace.com/organisational-design

Hi all- Thanks in advance for your help🙏.  I am trying to work out how to make my title text sticky in a section.

On this particular page, I would like the title text that says "Company Vision & Core Values" (in the Section= section[data-section-id="610b6b55c690502bba666c4a"]) to stay fixed at the top while the rest of the text in that section scrolls. I want to make sure that the title text has the same background color as the section so that the scrolling text is readable and then disappears once it reaches the title text (as opposed to getting overlayed on the title text). 

Then once you get to the bottom of that section, you just keep scrolling to the next section (and the "Company Vision & Core Values" title text is no longer fixed). 

The title text I am trying to make sticky is highlighted in the red box in the screenshot.  It's safe to say I have really no clue what I am doing here so I appreciate it being explained as elementary as possible! Thanks.

 

password= helpmeplease

 

Thank you!

I suggest you split the heading into it own seperate text block, so on your page h1 and the h3 below can be on different text block.

Look how it display here

The code for the block, note that id can be extracted using this

#block-2e30026b2edaf7cb12e9 {
  position: sticky;
  top: 100px
}

Chrome Web Store - Extensions (google.com)

Notice 2 block has been seperated here

PS: You can use javascript plugin as well, if you are familiar

Sticky Plugin (stickyjs.com)

hi there- thanks for the response. I separated the "Company Vision & Core Values" and "For: C-Suite | HR Leaders" into 2 different text blocks. I tried inserting this: 

#block-2e30026b2edaf7cb12e9 { position: sticky; top: 100px }

into the Custom CSS and nothing happened. Please advise. Thanks

Solved- this is what I ended up using in the Custom CSS

-Change #YOUR BLOCK ID for your actual block id

-Change the background color (#f6f2ea) to the existing background color of of the section (that way you don't get text on text when scrolling)

//Change Text Block Background Color and Make Text Block Sticky Text
//change text block background color
#YOUR BLOCK ID {
background: #f6f2ea;
padding: 50px;
text-align: center;
}

  //change text block to make it sticky  
#YOUR BLOCK ID  {position: -webkit-sticky!important;
        position: sticky!important;
        top: 60px;
        z-index: 99999;
    }

Just in case your or anyone else is having issues with Sticky Split.  You can now use SquareKicker to apply Sticky Split with one click. 

https://squarekicker.com/letsmakethis/stickysplit

If your just using SquareKicker for this single feature, you can use SK for one month as a one off and changes save forever.