gregbarbosa Posted September 24, 2021 Share Posted September 24, 2021 (edited) Site URL: https://weareteller.com/sandbox How do I turn a code block into a sticky item? I'm using the following code and noticing it works with other block types, but not code blocks: .code-block { position: sticky; position: -webkit-sticky; top: 100px !important; } My guess has to do with how position: sticky handles content inside of wrappers, but I'm not sure. I'd like the right side column (text inside a code block) to stick as a visitor scrolls down a page. Edited September 24, 2021 by gregbarbosa fixing text Link to comment
Beyondspace Posted September 27, 2021 Share Posted September 27, 2021 (edited) On 9/24/2021 at 11:55 PM, gregbarbosa said: Site URL: https://weareteller.com/sandbox How do I turn a code block into a sticky item? I'm using the following code and noticing it works with other block types, but not code blocks: .code-block { position: sticky; position: -webkit-sticky; top: 100px !important; } My guess has to do with how position: sticky handles content inside of wrappers, but I'm not sure. I'd like the right side column (text inside a code block) to stick as a visitor scrolls down a page. try #block-yui_3_17_2_1_1632403820243_21594 +.row .span-4 { position: sticky; top: 100px !important; } #collection-614dfddd7a19a10a3fcc2518 .site-wrapper { overflow: visible !important; } Edited September 27, 2021 by bangank36 gregbarbosa 1 Greeting, it's 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, Keyword HighlighterIf 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
Beyondspace Posted September 27, 2021 Share Posted September 27, 2021 Greeting, it's 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, Keyword HighlighterIf 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
gregbarbosa Posted September 27, 2021 Author Share Posted September 27, 2021 (edited) 4 hours ago, bangank36 said: #block-yui_3_17_2_1_1632403820243_21594 +.row .span-4 { position: sticky; top: 100px !important; } #collection-614dfddd7a19a10a3fcc2518 .site-wrapper { overflow: visible !important; } @bangank36 that worked! Thank you. Targeting the span and setting overflow to visible was what I missing! Edited September 27, 2021 by gregbarbosa Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment