Kico Posted January 5, 2021 Share Posted January 5, 2021 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
tazmeah Posted January 6, 2021 Share Posted January 6, 2021 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. Link to comment
Kico Posted January 6, 2021 Author Share Posted January 6, 2021 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
TVB Posted February 25, 2021 Share Posted February 25, 2021 @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 Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TVB Posted March 4, 2021 Share Posted March 4, 2021 @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 Link to comment
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TVB Posted March 10, 2021 Share Posted March 10, 2021 Hi @tuanphanwe also want the paragraph highlighted in pink to be sticky as well, is this possible? Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
sharine Posted March 21, 2021 Share Posted March 21, 2021 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.