Jump to content

Need help with how to make a text block sticky.

Recommended Posts

Site URL: https://www.mdzadesign.com/new-blog/bear-republic-crossfit

Happy New Year everyone!

I would like to make the text block sticky in this blog post which is displayed in a summary block on a blank index page. I want the text block to remain in place while images on the right are scrolled through. Exactly as it is in the Flatiron template here. I tried adding:

.sqs-block html-block sqs-block-html {
     position: sticky;
    position: -webkit-sticky;
    top: 200px;
}

It didn't work. I want the code to apply to ALL text blocks for blog posts displayed on this particular page. At some point while researching this I came across an article saying that the code above would work IF the container that both the text block and the images to be scrolled was targeted. I don't know how to do that. Any help with this would be appreciated!

Thanks!

Link to comment

Please try this. I tested it on seven (7) of your blog posts and it worked fine. 

@media only screen and (min-width: 641px) {
  [data-layout-label='Post Body'] > :first-child :first-child:not([id]).col {
      position: sticky;
      top: 200px;
  }
}

Personally, I'd adjust the 200px portion to a smaller number, but that's just my opinion. In two tests, 174px appears to make the text "fixed" in place. Numbers greater than 174 push the text down below its original starting position. Numbers less than 174 give it the sticky behavior - meaning it will scroll up until a bit then stick, and scroll back down and then stick.

Edited by tazmeah
added an opinion
Link to comment
14 hours ago, tazmeah said:

Please try this. I tested it on seven (7) of your blog posts and it worked fine. 


@media only screen and (min-width: 641px) {
  [data-layout-label='Post Body'] > :first-child :first-child:not([id]).col {
      position: sticky;
      top: 200px;
  }
}

Personally, I'd adjust the 200px portion to a smaller number, but that's just my opinion. In two tests, 174px appears to make the text "fixed" in place. Numbers greater than 174 push the text down below its original starting position. Numbers less than 174 give it the sticky behavior - meaning it will scroll up until a bit then stick, and scroll back down and then stick.

Wow! Thank you so much! I'd like to say I was close but I wasn't. I didn't even think to add this portion of your code. Works great! And I did end up going with 174. Thank you so much!

:first-child :first-child:not([id]).col
Link to comment
  • 1 month later...
On 2/26/2021 at 3:28 AM, TVB said:

@tazmeah Hi, I am looking for the same thing on my blog pages, to have the text headline and description sticky and when you scroll down the page we want the text to scroll as well (fixed?) could you help? 🙂

Page: https://thevisualbrand.squarespace.com/work/altos-tequila

Password: tvb

Do you still need help on this?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/4/2021 at 9:24 PM, TVB said:

@tuanphan Yes please, we still need help on this. We want to make the text box sticky- see picture below on this page and all blog pages:

https://thevisualbrand.squarespace.com/work/altos-tequila

password: tvb

 

Screen Shot 2021-03-04 at 9.24.23 AM.png

Add to Design > Custom CSS

/* sticky text */
@media screen and (min-width:768px) {
.blog-item-top-wrapper {
    position: sticky;
	position: -webkit-sticky;
    top: 100px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 3/10/2021 at 9:39 PM, TVB said:

Hi @tuanphanwe also want the paragraph highlighted in pink to be sticky as well, is this possible?

 

 

Screen Shot 2021-03-10 at 9.39.13 AM.png

Hi. Sorry for the delay. Do you still need help?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi,

Within a section, I’m trying to make an image sticky, while allowing the text to scroll. Because these read as "stories", would it be better to incorporate it as a blog (ideally I'd like to have pagination, so people can go from story to story) or would it be better to just incorporate it on a regular page?

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.