Note: This is based on bootstrap-4
If you are using multi column design in your website, this may be applicable to you. Manytimes, if you have an article long enough to cover main column, but, the right or left column is just blank.
Example below shows the empty right bar.
Which doesn’t look a good user experience, you may want to fill some content.
Bootstrap Sticky Position
Bootstrap provides a solution to this problem, but this doesn’t work on some browser. See bootstrap documentation for sticky. But, the documentration is not having any example.
Make a block Sticky
Goto the “div” which you want to make sticky. And, add a class: “sticky-top”. Example:
<div class="card mb-2 sticky-top" style="top: 100px;">
...
</div>I had to use style, as I’m using a fix static top navbar.
The beauty of this code is that, it is so simple yet powerful. Even, you have multiple blocks on top of this, it will wait for its turn, and make itself sticky when scrollbar goes past this. What I like more is, if you have a big footer, it stop itself going over there. As, in previous “affix or scrollspy” solution, you need to track the top and bottom positions. It work like a charm.
Code on GyanByte Github
See this complete html example:
Demo on CodePen To see things live, goto: GyanByte CodePen
$ subscribe --weekly
One deep dive a week, in your inbox
System design, AI engineering, trading systems and interview prep. Tested code, real numbers. Free, and you can unsubscribe any time.
or read it on gyanbyte.substack.com
