How To Add a Sticky Sidebar in Squarespace

Today I'm walking you through how to add a sticky sidebar in Squarespace (or any platform!).  As usual, this was a question asked in the Squarespace forum and, of course, I wanted to to share with you all as well. :)

Here's the video recap (to prove it's painless) and script + detailed instructions are below.

1.  Insert javascript

Put the below script in Settings -> Advanced -> Code Injection -> Footer

<script>
// Sticky Nav Component
var Sticky = (function() {
  'use strict';

  var CSS_CLASS_ACTIVE = 'is-fixed';

  var Sticky = {
    element: null,
    position: 0,
    addEvents: function() {
      window.addEventListener('scroll', this.onScroll.bind(this));
    },
    init: function(element) {
      this.element = element;
      this.addEvents();
      this.position = (element.offsetTop - 40);
      this.onScroll();
    },
    aboveScroll: function() {
      return this.position < window.scrollY;
    },
    onScroll: function(event) {
      if (this.aboveScroll()) {
        this.setFixed();
      } else {
        this.setStatic();
      }
    },
    setFixed: function() {
      this.element.classList.add(CSS_CLASS_ACTIVE);
      // not needed if added with CSS Class
      this.element.style.position = 'fixed';
      this.element.style.top = '40px';
    },
    setStatic: function() {
      this.element.classList.remove(CSS_CLASS_ACTIVE);
      // not needed if added with CSS Class
      this.element.style.position = 'static';
      this.element.style.top = 'auto';
    }
  };

  return Sticky;

})();


//  Init Sticky
var sticky = document.querySelector('.folder-nav');
if ((sticky) && (/Android|BlackBerry|iPhone|iPad|iPod|webOS/i.test(navigator.userAgent) === false)) {
  Sticky.init(sticky);
}
</script>

PLEASE NOTE:

The '.folder-nav' is the selector for the sidebar in the Bedford template.  Use Chrome Inspector to figure out the class name of your inner sidebar (ha, I'm sounding like a code yoga class).   Do not use the id of the outer sidebar as this will mess with the layout of your page.


Good news....there is no 'Step 2'!  Enjoy and let me know if you have any questions.