On my web page I have implemented a navbar menu which is automatically hidden/shown while scrolling down/up respectively. The menu's height is variable depending on the width of the display therefore in order for the content of the page to be properly presented I'm repositioning it downward based on the height of the navbar's height.
The problem I have is that this action adds to the Cumulative Layout Shift time which obviously is not an ideal situation. The implementation looks as follows and I suppose there's nothing wrong with it (correct me if I'm wrong, bottom line is that it works) but rather the problem might be it's execution which is performed a tid bit too late. Any ideas when would be the best time to properly reposition the content of the web page?
var navbar = document.getElementById("navbar");
var navbarHeight = navbar.getBoundingClientRect().height;
var firstelement = document.getElementById("first-element");
firstelement.style.height = navbarHeight + "px";
