joshuaechevarriadop Posted December 7, 2022 Share Posted December 7, 2022 Hi im having issue with a sticky element not working. Not sure what the problem is. below is the code and a screengrab of whats happening. any ideas? https://blueberry-carrot-xawg.squarespace.com/narrative-copy-1 pw codeblock <html> <div id="sidetitle1"> <p style="letter-spacing:35px; opacity:100%; color:white; font-size:150%; font-family:lato; font-weight:600;">NARRATIVE</p> </div> </html> <style> #sidetitle1 { display: flex; position: sticky !important; position: -webkit-sticky !important; text-shadow: 1px 1px 10px #000 !important; writing-mode: vertical-lr; text-orientation: upright; width: 25px; height: 100px; top:0px !important; z-index: 99999; } </style> 149486028_ScreenRecording2022-12-07at8_00_47AM.mov Link to comment
Beyondspace Posted December 7, 2022 Share Posted December 7, 2022 56 minutes ago, joshuaechevarriadop said: Hi im having issue with a sticky element not working. Not sure what the problem is. below is the code and a screengrab of whats happening. any ideas? https://blueberry-carrot-xawg.squarespace.com/narrative-copy-1 pw codeblock <html> <div id="sidetitle1"> <p style="letter-spacing:35px; opacity:100%; color:white; font-size:150%; font-family:lato; font-weight:600;">NARRATIVE</p> </div> </html> <style> #sidetitle1 { display: flex; position: sticky !important; position: -webkit-sticky !important; text-shadow: 1px 1px 10px #000 !important; writing-mode: vertical-lr; text-orientation: upright; width: 25px; height: 100px; top:0px !important; z-index: 99999; } </style> 149486028_ScreenRecording2022-12-07at8_00_47AM.mov How do you want it to sticky? Do you mean fixing this element on a fixed position? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Ziggy Posted December 7, 2022 Share Posted December 7, 2022 Try changing this line: position: sticky !important; to: position: fixed; And adjust the top property to suit, probably about forty pixels. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
joshuaechevarriadop Posted December 7, 2022 Author Share Posted December 7, 2022 7 hours ago, Beyondspace said: How do you want it to sticky? Do you mean fixing this element on a fixed position? I'd love to have it scroll down until a certain point and then stop to introduce a new section that does the same action Link to comment
certifiedmexicanpharmacy Posted December 8, 2022 Share Posted December 8, 2022 Troubleshooting position sticky Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. Position sticky may not work correctly if any parent element has a set height. Many browsers still do not support sticky positioning. Link to comment
Beyondspace Posted December 8, 2022 Share Posted December 8, 2022 May be you can try .fe-block-fdf87f3b28856d0d23e5 { position: sticky; top: 30px; height: 1px; } Hope it can help cat_not_kitty 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
cat_not_kitty Posted January 10 Share Posted January 10 Thank you so much, BeyondSpace – this code worked perfectly for me (with my own .fe-block, of course)! For those using the amazing (and indispensable) Squarespace ID Finder extension for Chrome, you can just copy your desired block's ID, delete the #, and add .fe- to the beginning everything remaining to target your .fe-block. I was running into this issue in a single usage of my sticky code for a reason that I haven't quite been able to decipher (I have two other seemingly identical sections on the same page – left aligned headers sticking to scroll alongside their respective accordions – that are working without the need for the height to be defined). A caveat for future readers that I needed to substantially increase the number after height for my site – to 280px(!) – so don't be afraid to really fiddle with that number to get your desired result 🙂. 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