A solution to The Height Problem?
I needed to scroll columns at different rates to avoid blank space. I didn’t know how to call this or even how to browse properly for the solution.
while working on a clone for the website I found a particular feature that I didn’t know how to call.
The site was https://www.newsweek.com a magazine that uses bootstrap.
Basically, the problem was that the site has tree columns and each of them had a different number of items. That caused the columns to have different heights.
As I have to continue with more content, I didn’t want to leave that blank space, so I started googling for the solution.
In the beginning, the solution was not clear and I spent a lot of time.
To get the behavior I wanted to achieve, so, I decided to write this article.
The solution, if you have done some research until now is by using the position: sticky property. If you are using bootstrap, the sticky-top class.
Using either it is not intuitive and actually is not well documented, here I will explain all the details.
In this pen, you can see that we have one row and tree nested columns. The row is a flex container and the columns flex-items. that’s the same if you are using bootstrap, and apply the class row, then define the columns.
<div class="row">
<div class="col1">.</div>
<div class="col2">.</div>
<div class="col3">.</div>
</div>Inside each column are many items, of course. the space in the column is much greater than the required for the items and that’s what we want to fix.
Once you apply the positon: sticky and top: 0 properties to an item, you will notice that float over the others. hiding the content.
The solution is to create a container that wraps the items and apply the positon: sticky and top: 0 to the wrapper. (one common mistake is to forget to apply the top: 0 property).
If you use Bootstrap, the sticky-top class applies both properties. so, you don’t have to worry about that issue.
Finally, you can see the effect working. At first, the behavior it seems like the columns scrolls at different velocities or rates. The content moves to fit the space. Is natural to begin searching for “column scrolling” or “move items while scrolling”.
I found that confusing and at first didn’t come to my mind the “sticky idea”.
How Sticky works?
(adapted from the article “CSS Position Sticky — How It Really Works!”)
In the article: “CSS Position Sticky — How It Really Works!”, it is explained the sticky property. but, I would like to make a correction.
CSS position sticky has two main parts, sticky item & sticky container.
Sticky Item — is the element that we defined with the position: sticky. The element will float when the viewport position matches the position definition. for example: top: 0px .
Example
.wrapper{
position: sticky;
top: 0px;
}Sticky Container — is the HTML element which wraps the sticky item. This is the area that the sticky item can float in.
When you set position: sticky you’re automatically defining the parent element as a sticky container. This is very important to remember! The container is the scope of the sticky item, and the item can’t get out of its sticky container.
This is the Correction. The reason why the sticky property could not work is that there is not available space in the sticky container. thus, an sticky item can be alone in the sticky containiner. but, to the property to work there must to be available space in the sticky container.
Lastly the property support.
You have to know that this property has wide support, and there are some scenarios in which you could use it. The footer, the navbar (of course), etc.
Part of to be innovative is to have the capacity to apply the available tricks in different situations, this is one of those situations.
