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 format) 💫 Animated Buttons (Referral URL) 🥳 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 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment