Jump to content

Sticky Column Blog - Fluid Engine

Go to solution Solved by mgcreative,

Recommended Posts

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 by mgcreative
adding password
Link to comment
  • Solution

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>
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.