mgcreative Posted August 30, 2023 Share Posted August 30, 2023 (edited) I'm trying to create a sticky scroll blog page here: https://kayleecookdesign.squarespace.com/projects/blog-post-title-one-lgwb5 Password: KAYLEE The example my client like is here: https://www.yondinteriors.com/projects/wabisabicottage -- Would love some help with making the left column sticky and the gallery to scroll. Thanks! Edited August 30, 2023 by mgcreative adding password Link to comment
Solution mgcreative Posted August 30, 2023 Author Solution Share Posted August 30, 2023 Okay, I actually think I figured it out (may need some adjustment - open to suggestions!). But for anyone searching: I used this code -- a Code box on the column, and then just adjusted the top px. Source: Will Myers Add this to Custom CSS: @media(min-width:767px) { .col.wm-sticky-column { position:sticky; top: 150px; } } Put this in a code box in the column you want (works for blog posts, even in fluid engine): <div class="wm-sticky-column"></div> <script> (function() { function initSticky() { let stickyStarts = document.querySelectorAll('.wm-sticky-column'); stickyStarts.forEach(el => { let col = el.closest('.col'); if (!col) return; col.classList.add('wm-sticky-column'); }); } window.addEventListener('DOMContentLoaded', initSticky); }()); </script> tuanphan 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