How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js
How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js
How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js

In this tutorial we’ll use ScrollMagic.js, a hugely popular JavaScript library, to build a sidebar that becomes sticky on page scroll. In three steps (HTML, CSS, and JavaScript) we’ll outline the whole process.

Here’s what we’re going to create (check out the full screen version to experience its full magic and give it some ♥):

The sidebar will be pinned only when the browser window is at least 768px wide and it reaches the top edge of the viewport. Smaller screens experienced a stacked layout instead.

What is ScrollMagic.js?

For the best description of ScrollMagic, we’ll head over to its Github page:

“The javascript library for magical scroll interactions.”

Created by Jan Paepke, it can be effectively combined with the Greensock Animation Platform (GSAP) for building complex and attractive JavaScript animations. To better understand the capabilities of ScrollMagic, check out this list of examples and take a look at these tutorials and courses on Tuts+.

Getting Started With ScrollMagic.js

To get started with ScrollMagic, you first have to include it in your projects. You can download it by visiting its GitHub repo, by using a package manager (e.g. npm), or by loading the necessary assets through a CDN (e.g. cdnjs). 

For our demo, we’ll choose the last option. With that in mind, if you look under the Settings tab of our demo pen, you’ll see that I’ve included one external JavaScript file:

Demo Set Up

I’ve also incorporated Babel for compiling the ES6 code down to ES5.

1. The HTML

Our HTML consists of two helper sections and a post. The post contains two sub-sections: the post’s details and the post’s sidebar. In a real scenario the post’s contents could correspond to a blog post, a hotel room, or a school program.

Here’s the markup:

2. The CSS

We won’t define any special styles for our example. Interestingly though, we use CSS grid to layout the post content’s on medium screens and up (≤768px) .

Here’s part of the CSS:

3. The JavaScript

With the HTML and CSS in place, we’re ready to examine the JavaScript code responsible for firing ScrollMagic.  

Keep in mind that the best way to understand how this plugin works is to read its documentation. Another useful source of information is ScrollMagic’s cheat sheet created by Petr Tichy

Here’s our JavaScript code:

Let’s briefly describe the necessary actions:

  1. We start by creating a controller.
  2. Next, we create a scene with custom options and add it to the controller.
  3. If the window’s width is at least 768px and the sidebar reaches the top edge of the viewport, we pin it for a duration defined in the scene. In our case, the desired duration is calculated by subtracting the post’s details height from the height of the sidebar’s contents. 
  4. As the window gets resized, we check its width. If it’s narrower than 768px, the sidebar remains part of the normal document flow, otherwise it becomes sticky.

4. Browser Support

The plugin itself has great browser support. Beyond the plugin’s support, our demo makes use of CSS Grid, so it will only work in browsers that support this layout method.

Conclusion

In this tutorial, we managed to build a sidebar that becomes sticky as we scroll down the page. Our basic implementation isn’t the most powerful thing you can build with this amazing library, but hopefully useful enough to take advantage of it in an upcoming project.

Lastly, if you’re familiar with any other more effective ScrollMagic approaches for building our demo, let us know in the comments below.