Two column layouts on the web break down when one column is much longer than the other. Scroll far enough and some significant portion of the screen is empty.
One solution is to have each column independently scroll but multiple scroll bars can be very confusing for a user. A better solution is the one employed on Yahoo News where the shorter right panel is floating relative to the left but still scrolls with the primary browser scroll.
There are three situations to consider: the user is at the top of the content, the user is in the middle of the content, the user is at the bottom. The approach is pretty simple, if the viewport is at the top or bottom of the content, fix the right panel to the correct border. If the contents of the right panel are in the middle of the viewport, then add enough top margin to keep the content within view and adjust accordingly on scroll.
When the browser viewport is at the top of the screen, the element should be position as it would be naturally.
As the user scrolls, the element should be pushed down relative to it's container so that no portion of the right column is empty.
Once the viewport reaches the bottom of the screen, the right column should be fixed in position. If the user starts scrolling up, then the column should remain in place until the top leaves from view.
Not pictured, but much easier, is the case where the right column is shorter than the viewport. Then the right column simply needs to be position
fixed to the top of the screen once the header elements leave the viewport.
I've created a simple demo to show the implementation. You can see that it only scrolls once past the header and only the default browser scroll is used.
To implement this solution, I created two JQuery Plugins, one to equalize the containers and the other to set up the scrolling panel.
There are three required
divs. The container for the left column, the container for the right column and the floating element.
The containers must have a CSS position property set. The right column and the floating element must have an explicit height set.
Finally, you need to make the left and right column containers equal size and construct the sliding panel.
Q: The right panel does not scroll
A: Make sure that the container for the left column and the container that the scrolling right panel are of equal size.
Q: The panel does not align correctly to the top and/or bottom
A: This does not account well for padding or fixed elements. You should set the top and bottom offset properties.
Q: Scroll works fine, but the panel gets very wide
A: The panel needs to be of fixed width. Otherwise the positioning tricks will expand the width to all available space.
Did you like this? Please share:
The Lost Year: A Failed Experiment to Switch Away From Mac
Fed up with the Apple Keyboard, I bought a ThinkPad, installed Linux, and promptly decided that I hated computers.
Maker's Space, Manager's Space
The Grand Remote Work Experiment: A Retrospective
The COVID-19 pandemic has lead to an unexpected experiment in remote working. What has worked and why?