semigrownkid Posted October 1, 2022 Share Posted October 1, 2022 (edited) Site URL: https://uxplaybook.org/ux-accelerator Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046 How do I make this block stop at the footer? Quote /* Text sticky */ @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1664264642296_1491046 { position: sticky; top: 200px; position: -webkit-sticky; z-index: 999; }} Edited October 1, 2022 by semigrownkid Link to comment
Beyondspace Posted October 1, 2022 Share Posted October 1, 2022 4 hours ago, semigrownkid said: Site URL: https://uxplaybook.org/ux-accelerator Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046 How do I make this block stop at the footer? Quote /* Text sticky */ @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1664264642296_1491046 { position: sticky; top: 200px; position: -webkit-sticky; z-index: 999; }} I check that it is set sticky within the current section. Do you need to set it fixed for entire page? 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, Lightbox Studio pluginIf 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
semigrownkid Posted October 1, 2022 Author Share Posted October 1, 2022 7 hours ago, bangank36 said: I check that it is set sticky within the current section. Do you need to set it fixed for entire page? Yes please. It needs to be fixed until the footer (but not for anything above it) Link to comment
couldbegood Posted January 13 Share Posted January 13 Hello - did you manage to get the block to be fixed over the whole page (I am assuming multiple sections? I can only get it to stick to one section Thanks Link to comment
tuanphan Posted January 15 Share Posted January 15 On 1/13/2023 at 6:36 PM, couldbegood said: Hello - did you manage to get the block to be fixed over the whole page (I am assuming multiple sections? I can only get it to stick to one section Thanks If fixed whole page, I think you need to use position fixed not sticky 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
couldbegood Posted January 19 Share Posted January 19 On 1/15/2023 at 9:27 AM, tuanphan said: If fixed whole page, I think you need to use position fixed not sticky This is the code I'm using in the page header: #block-yui_3_17_2_1_1673604221221_17626{ position: fixed; top: 40%; left: 96%; transform-origin: 100% 0; z-index: 9999; width: 40px; } But only appears for that section unthinkable.squarespace.com unthinkable Thanks Link to comment
tuanphan Posted January 26 Share Posted January 26 On 1/19/2023 at 10:37 PM, couldbegood said: This is the code I'm using in the page header: #block-yui_3_17_2_1_1673604221221_17626{ position: fixed; top: 40%; left: 96%; transform-origin: 100% 0; z-index: 9999; width: 40px; } But only appears for that section unthinkable.squarespace.com unthinkable Thanks Which page are you referring to? I don't see this block on homepage 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
couldbegood Posted January 31 Share Posted January 31 On 1/26/2023 at 8:02 AM, tuanphan said: Which page are you referring to? I don't see this block on homepage Thanks but I decided to just use the header button and have it fixed and hide the logo on scroll tuanphan 1 Link to comment
MariaFY Posted April 23 Share Posted April 23 @tuanphan Do you know how I could get the first section to stick to the top (heading + graphic) and the blog below scrolling through while the heading stays? I tried the code in this thread but can't seem to identify the correct ID or class selector. Thanks for you help if you have a minute. site: https://hmna.squarespace.com/news pw: macadamia Link to comment
tuanphan Posted April 25 Share Posted April 25 Add to Design > Custom CSS @media screen and (min-width:768px) { [data-section-id="6440e1c28a8cbf7010a655b8"] { position: sticky; top: 0; z-index: 99999; } } MariaFY 1 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
adrientharrison Posted May 18 Share Posted May 18 (edited) Hey @tuanphan , I tried this code: @media screen and (min-width:768px) { .fe-block fe-block-yui_3_17_2_1_1680639793166_2840 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } for the following page (https://echostudio.co/about) where I'm trying to get the search bar and the table of contents box on the right to be fixed / sticky only when a user is scrolling through the "What Happens at ES" section Would appreciate it if you could help me out 🙂 Edited May 18 by adrientharrison Link to comment
tuanphan Posted May 22 Share Posted May 22 On 5/19/2023 at 1:37 AM, adrientharrison said: Hey @tuanphan , I tried this code: @media screen and (min-width:768px) { .fe-block fe-block-yui_3_17_2_1_1680639793166_2840 { position: sticky; top: 0; position: -webkit-sticky; z-index: 999; } } for the following page (https://echostudio.co/about) where I'm trying to get the search bar and the table of contents box on the right to be fixed / sticky only when a user is scrolling through the "What Happens at ES" section Would appreciate it if you could help me out 🙂 Use this new code @media screen and (min-width:768px) { .fe-block-yui_3_17_2_1_1680639793166_2840 { position: sticky; top: 0; position: -webkit-sticky; } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment