1window.addEventListener("DOMContentLoaded",function(){ 2 3 /** 4 * The request animation frame is there to 5 * update the class on the navbar and the padding on the 6 * body at the same time to not have any layout shift 7 */ 8 window.requestAnimationFrame(function() { 9 let fixedNavbar = document.querySelector(".navbar.fixed-top") 10 // correct body padding 11 let offsetHeight = fixedNavbar.offsetHeight; 12 document.body.style.setProperty("padding-top",offsetHeight+"px"); 13 // correct direct navigation via fragment to heading 14 let style = document.createElement("style"); 15 style.classList.add("menubar-fixed-top") 16 // textContent and not innerText (it adds br elements) 17 style.textContent = `:target { 18 scroll-margin-top: ${offsetHeight}px; 19}`; 20 document.head.appendChild(style); 21 }); 22 23}); 24