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: 


Password: KAYLEE

The example my client like is here:



Would love some help with making the left column sticky and the gallery to scroll. 


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 {
    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>
(function() {
  function initSticky() {
    let stickyStarts = document.querySelectorAll('.wm-sticky-column');

    stickyStarts.forEach(el => {
      let col = el.closest('.col');
      if (!col) return;

  window.addEventListener('DOMContentLoaded', initSticky);
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.