Need help with how to make a text block sticky.

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!

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.

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

@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

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?

@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

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

 

Add to Design > Custom CSS

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

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

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?

 

 

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

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?