MatthewTDC Posted September 5, 2020 Share Posted September 5, 2020 Site URL: https://www.thedesignconference.com.au/best-agency-application Hey there gang. Im trying to use the SQSP code component to create a website section featuring two 50% wide columns. The left column features a h2 header, with the right column featuring four paragraphs of text. My goal is to use 'position: sticky' on the h2 header in the left column, to pin the h2 to the top of the browser while the user scroll through the section. — — — — — — — — — — — My CSS — — — — — — — — — — — .orb-questions-wrapper { display: flex; background-color: #FFF; overflow: visible; float: left !important; } .orb-questions-left-column { position: -webkit-sticky !important; position: sticky !important; top: 0px !important; width: 50% !important; float: left !important; } .orb-questions-right-column { width: 50% !important; float: right !important; } — — — — — — — — — — — My HTML — — — — — — — — — — — <div class="orb-questions-wrapper"> <div class="orb-questions-left-column"> <h2>Heading</h2> </div> <div class="orb-questions-right-column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis congue ipsum. Mauris eu sapien in tortor ullamcorper fermentum. Pellentesque id pretium ante, ut consectetur odio. Sed at orci neque. Nullam quis facilisis ipsum. Donec eleifend lectus feugiat ante pharetra viverra. Phasellus cursus lacus vel gravida porta. Fusce rhoncus, nisl eu commodo ornare, lectus ex condimentum tortor, eleifend tristique nunc dolor in nisi. Fusce consequat volutpat massa aliquam dictum. Nulla in luctus risus, mattis laoreet lorem. Nullam at nisi venenatis, eleifend leo et, finibus diam. Donec id ligula condimentum, consectetur urna eget, faucibus neque. Ut nec commodo odio, et tempor quam. Proin at tempus odio, a egestas augue. Integer eu consectetur est, vel vestibulum quam.</p> <p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p> <p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p> <p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p> </div> </div> — — — — — — — — — — — I know I am missing something simple. Please help. Thanks in advance — Matt TDC Link to comment
rwp Posted September 5, 2020 Share Posted September 5, 2020 Put the h2 in its own div and apply the sticky to that div's ID https://jsfiddle.net/snegvx4k/ Link to comment
MatthewTDC Posted September 5, 2020 Author Share Posted September 5, 2020 Thanks for the update RWP. I made the edit, added the div with the StickMe ID and still nothing. I think there is something pre-existing in the SQSP code that is preventing this from working. I cant for the life of me figure it out. The updated code you created is live here: https://www.thedesignconference.com.au/best-agency-application — I would be forever grateful if you can find the bug. Ive gotten to the point where I'm guessing (more than ever haha) Link to comment
rwp Posted September 5, 2020 Share Posted September 5, 2020 One of the parent elements must have overflow set to hidden. Link to comment
rwp Posted September 5, 2020 Share Posted September 5, 2020 I found it, its the section. #best-agency { overflow: visible !important; } Link to comment
MatthewTDC Posted September 5, 2020 Author Share Posted September 5, 2020 @rwp: Maaaaaaaattttttttte! How could I ever repay you!? Whats your instagram (I'm matthew.tdc on insta) so I can add ya? I'd love to send you a thank you gift! BIG UPS! Im so grateful! Thank you mate! You're a rock star! Link to comment
rwp Posted September 5, 2020 Share Posted September 5, 2020 You will also need to remove all of the !important's from the #StickMe css, and add in this to make up for the fixed mobile bar. @media screen and (max-width: 674px) { #StickMe { top: 115px !important; } } Link to comment
rwp Posted September 5, 2020 Share Posted September 5, 2020 1 minute ago, MatthewTDC said: @rwp: Maaaaaaaattttttttte! How could I ever repay you!? Whats your instagram (I'm matthew.tdc on insta) so I can add ya? I'd love to send you a thank you gift! BIG UPS! Im so grateful! Thank you mate! You're a rock star! I don't have an instagram, I do have a contribute link on my website, though I never expect anything for helping out here. Link is in my signature. 👍 Link to comment
ocpl Posted November 20, 2020 Share Posted November 20, 2020 HI I am also interested to know how to make 1 of 2 columns sticky when you scroll the other up to the end. I will be on 7.1 template Beaumont. Many thanx Link to comment
tuanphan Posted November 22, 2020 Share Posted November 22, 2020 On 11/20/2020 at 10:52 PM, ocpl said: HI I am also interested to know how to make 1 of 2 columns sticky when you scroll the other up to the end. I will be on 7.1 template Beaumont. Many thanx Can you share site url? We can help easier 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
ocpl Posted November 23, 2020 Share Posted November 23, 2020 Hi Tuanphan The site is till under dev so you cannot see it but I will use this template : https://beaumont-demo-fr.squarespace.com/work/clay-ceramics and I need exactly this : https://readcereal.com/japan-house/ Many thanx Link to comment
creedon Posted November 24, 2020 Share Posted November 24, 2020 12 hours ago, ocpl said: The site is till under dev so you cannot see it We could see it if you set up a site-wide password. Post the password here. We can then take a look at your issue. It is difficult not being able to work on the actual site. Even though it is based on a template. Changes you've made to the site may effect how the custom code would be created. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.