Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Beeline

Question

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!

Image 5-8-21 at 9.31 pm.jpg

Edited by Beeline
Link to comment

4 answers to this question

Recommended Posts

  • 0
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!

Image 5-8-21 at 9.31 pm.jpg

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

image.thumb.png.e2d7d5452452cdedd972719ce96b4c85.png

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

image.png.1324a045feda92ed51bbb021dffd3f31.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

Sticky Plugin (stickyjs.com)

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

 

 

Link to comment
  • 0

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

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...