let calculateBodyOffset = () => {
let headerParent = document.querySelector("[data-header-offset]");
let vueApp = document.getElementById("vue-app");
let headerHeight = 0;
let allHeaderChildrenHeights = [];
Array.from(headerParent?.children).forEach(element =>
{
let elementHeight = 0;
// skip elements with the data attribute "data-scroll-void" and interpret their height as zero
if (!element.dataset.hasOwnProperty("scrollVoid")) {elementHeight = element.getBoundingClientRect().height;}
allHeaderChildrenHeights.push(elementHeight);
headerHeight += elementHeight;
});
vueApp.style.marginTop =headerHeight + 'px';
};
window.onload = function() {
if (window.innerWidth < 992) {
// Media in mobile
document.getElementById("menu-mobile-mw").classList.remove("unfixed");
}else{
// Media desktop
document.getElementById("menu-mobile-mw").classList.add("unfixed");
}
};
window.addEventListener('resize', function (){
if (window.innerWidth < 992) {
// Media in mobile
document.getElementById("menu-mobile-mw").classList.remove("unfixed");
// Calculate offset only if the user has scrolled down from the top
if(window.pageYOffset > 0 || (window.pageYOffset === 0 && document.getElementById('page-header').classList.contains('fixed-top') )){
calculateBodyOffset();
}
}else{
// Media desktop
document.getElementById("menu-mobile-mw").classList.add("unfixed");
// Calculate offset only if the user has scrolled down from the top
if(window.pageYOffset > 0 || (window.pageYOffset === 0 && document.getElementById('page-header').classList.contains('fixed-top') )){
calculateBodyOffset();
}
}
})
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Content here, content here', making it look like readable English.