Dynamic Offsets with Bootstrap Affix

Bootstrap or Bootstrap Affix

I was working on a Bootstrap project, which had a vertical accordion menu as a means of navigation. I had it set to keep each menu opened, unless clicked again. Where as a typical accordion menu would close all other menus, except the one recently clicked / opened.

At the very bottom of the accordion menu, I had another block. This was the affixed item. On initial page load, as you scrolled down, the block would automatically affix properly and follow you as you continue to scroll down the page (as expected).

The problem was, what if the user had previously opened one or multiple accordion menus above? This has now adjusted the overall height of the page. Now when you scroll down, the affixed item beneath the accordion menu would now start to affix “prematurely”, causing it to overlap the menu unexpectedly. This is due to the top offset assigned to the item on initial page load.

The affixed item was assigned a top offset on initial page load. The height of the page is adjusted post page load. That means, top offset from the initial page load is no longer valid.

Upon doing some research, I’ve figured out a solution that meets my needs specifically. I’ve tested it several times on large and medium screen sizes. This item isn’t affixed on small or extra small screen sizes.

Continue reading “Dynamic Offsets with Bootstrap Affix”