Building A Sticky Right Rail

This is my first Medium article and I thought to share my thoughts on a pretty interesting feature I worked on recently — the sticky right rail.

I was to build a right rail whose behavior was such that as a user scrolls on the page and approaches the end of the right rail, the right rail would lock to the bottom of the screen. It was expected to lock in such a way that would allow the user to keep scrolling the contents of the left rail until the user got to the bottom of the left rail which is same as the top of the footer. At this point, the left and right rail would scroll together with the footer. The video below shows the expected behavior of the right rail

Once I fully understood the expected behavior, powered by some Cappuccino at my work station, I did a sketch of the window and all the components, the sketch is shown in the image below with the red box representing the viewport the user sees and interacts with

Sketching the components helped me (& other team members) think more clearly about the right rail and I eventually divided it into three sub-tasks:

Task 1: Fixing the Right Rail to bottom of viewport

Task 2: Scrolling the Right Rail with the footer

Task 3: Knowing when to make the switch from 1 to 2 and vice-versa

Task 1: Fixing the Right Rail to bottom of viewport

Figuring out when to lock the right rail to the bottom of the viewport was an interesting problem. What was easy to see was that the right rail should be locked at the bottom of the viewport when there is no more content to view on the right rail (at the end of the right rail), what was more interesting to figure out was how to translate this to actual code.

After giving it some thought (with some coffee inspiration), I figured out that the point we get to the bottom of the right rail when the difference between the window’s scrollTop and the right rail top is greater than difference between height of right rail and height of the viewport (window) is the point at which the right rail should be locked (position: fixed)

The image below helps make this a bit clearer:

Task 2: Scrolling the Right Rail with the footer

The next task was figuring when to make the switch from position: fixed in order that the right rail could scroll with the footer. Recall the requirement is that the right rail locks at the bottom of the viewport but the left rail keeps scrolling till its end, then both right/left rail scroll together with the footer.

Again, it didn’t take long to figure out that the switch should be made once the footer scrolled into the viewport. What was more interesting was figuring out at what point the switch was expected to happen.

From the image above, one can see that the footer is not in view (the red box representing the viewport).

Compare the image in Figure 1.4 with the image below:

It becomes obvious that the footer comes into view when the sum of the value of the window’s scroll top and the height of the window is greater than or equal to the value of the footer top.

Task 3: Knowing when to make the switch from 1 to 2 and vice-versa

I feel this was the most challenging of all the sub-tasks. I won’t go into too much detail here but my solution was to track the scroll direction using the value of window scrollTop and based on that, I could make toggle between states 1 and 2.

Never Ever Forget the Edge Cases

Like with almost any problem, always look out for the edge cases. Some of the edge cases I’d to consider when working on this right rail were:

While a few of these edge cases were a pr, most of them I found out during testing.

Related posts:

The indications of blue waffles are regularly mixed up for different issues. These side effects are regularly so harmless thus normal that most ladies either don’t see them until it’s past the point…

Eu tenho um filho de quase 10 anos. Esse domingo fui assistir com ele o último filme da Marvel “Pantera Negra” e adoramos. Excelente filme de herói, casting perfeito, divertidíssimo. Todo o carinho…

As an author myself (but mostly blogger), I’ve learned a great deal of insight with book marketing over the years. If you take away anything from this post, it’s that you’ll learn a lot about…