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

Need help with how to make a text block sticky.


Kico

Question

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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([

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

Posted Images

9 answers to this question

Recommended Posts

  • 0

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 post
  • 0
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 post
  • 0
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?

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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?

Link to post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...