Sidebar Sticky

This page shows how to add a side-sticky element that moves with the user as they scroll.

This approach uses the CSS position:sticky feature, which is incompatible with some older browsers, most notably IE11. Compatibility Summary.

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

Your site must have the space for the sticky element to scroll through. For example, if you have a parent div that has a free space height of 1000px and the height of your sticky element is 200px, it will scroll only within the bounds of those 1000 pixels. If the height of the sticky element was 1000px, it will not stick as it takes up the entire space to scroll.

Within the space, mark the element you want to sticky with the following:

• Set the CSS prop position: sticky;
• Set the CSS prop position: -webkit-sticky;. This is for Safari
• You must set one of top, bottom, left, right. This dictates where the element will stick in view. For example, top: 0px means the element will stick 0px from the top of view. You can set any of these props to 0 as well
• If the element takes up the entire height of the parent, you must set the height of the element less than the height of the parent. In the example pages, the sticky elements do have a fixed height.

Troubleshooting

When I scroll down it doesn’t stick

Ensure:

• You must provide space in height on the parent for the element to move through, else it won’t stick (see examples and inspect with dev tools)
• The element that you want to stick must not span the entire height of the space it will be sticking to in view