Sidebar Sticky (Legacy)

This page provides a script to add a “side sticky” zone to your page that remains visible as the user scrolls down.

Examples

• Side-Sticky follows the user all the way to the bottom
• Side-Sticky follows the user until a STOP element is reached
• Side-Sticky follows user from partway down page until STOP element is reached

Implementation

The easiest approach is to inspect the HTML source of the above examples, and adapt for your own site.

Key points:

1. Adapt the values in the script-snippet below, editing the stickyElementOptions object.

   • elementToSticky is a mandatory value to set. If your sticky element is <div id="element"></div>, you would set the value as #element This element will stick to display, regardless of how far the user scrolls down Keep styling to the sticking element to a minimum. Instead, create a div with no styling and style the container of the sticky and the children of the sticky element (as shown in the examples)
   • elementToStopSticky is optional. If your element is <div id="stop-element"></div>, you would set the value as #stop-element This element dictates where the sticky will stop sticking to the view when the user scrolls far enough for this element to come up on display
   • marginFromTop and marginFromBottom is optional to change, depending on site style, adds a small margin to the top and bottom of the sticky unit to give space around it.

2. Put the modified script at the bottom of your website inside a <script> tag.

Troubleshooting

This section will update as we discover more issues with sticky implementation

When I scroll down it doesn’t stick

There are some CSS styles on the parent that will break the script (which uses position: fixed), such as having the transform property.

When I scroll down the element disappears

The layout may have broken for the sticky element, some tweaking may have to be made for the styling/layout of the sticky for it to stick properly.

When I scroll down it changes width size

The script applies a width: inherit style to the sticky element in order to maintain the width as you scroll down. You could either try and apply a fixed with to the parent of the sticky or remove all lines in the script that modify the width CSS style.

When I scroll down it breaks my site

It is best to apply the script to an element that is specifically for the sticky functionality and no other styling applied to it (As the script will modify the styling of the element as it sticks). For example:

<sidebar>
  <menu-links></menu-links>
  <div id="widget1"></div>
  <div id="element-to-stick">
    <div id="widget2"></div>
  </div>
</sidebar>

If this still doesn’t fix it, you may need to do some more specific tweaks to the layout to support it.

Sample script

document.addEventListener("DOMContentLoaded", function(event) {
  var stickyElementOptions = {
    // ID of element that you want to stick in view
    elementToSticky: '#element-to-stick',

    // ID of element where you want the sticky element to stop
    // remove // to enable
    // elementToStopSticky: '#element-where-the-stick-stops',

    // Padding from the top of the page when the element sticks
    marginFromTop: 10,

    // Padding from the top of the element where it stops sticking
    marginFromBottom: 10,
  };

  var stickingElement = document.querySelector(stickyElementOptions.elementToSticky);
  var originalTopValue = stickingElement.offsetTop;
  var stickyPosition = originalTopValue;
  
  var stopPosition = document.querySelector(stickyElementOptions.elementToStopSticky);

  window.onscroll = function() {
    var scrollBarPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (scrollBarPosition >= stickyPosition) {
      if (
        stopPosition &&
        scrollBarPosition > stopPosition.offsetTop - stickingElement.clientHeight
      ) {
        stickingElement.style.top = (stopPosition.offsetTop - stickingElement.clientHeight - stickyElementOptions.marginFromBottom) + "px";
        stickingElement.style.position = "absolute";
        stickingElement.style.width = "inherit";
      } else {
        stickingElement.style.top = stickyElementOptions.marginFromTop + "px";
        stickingElement.style.position = "fixed";
        stickingElement.style.width = "inherit";
      }
    } else {
      stickingElement.style.top = "";
      stickingElement.style.position = "";
      stickingElement.style.width = "";
    }
  }
});