Scroll content out from under fixed header w nav

Support
#1

Hello,
I am using the #Id in links to scroll the page down to the related content. Unfortunately the fixed header at the top of the page covers the content up. In this case what I am doing is using the Id in a H1, H2, etc, element as the scroll to. So localhost#Target.

I am trying to get the page to scroll down the height of the header with the following:

document.addEventListener("DOMContentLoaded",()=>{
   if (window.location.href.includes('#')) {
     document.querySelector('body').style.height = '';
    document.querySelector('html').style.height = ''; 
    document.querySelector('html').style.overflow = '';
    setTimeout(()=>{
      const locArr = window.location.href.split(/\#/g);
      const offSet = document.querySelector('#' + locArr[1]).offsetTop;
      window.body.scrollTo({ top : offSet + 187 });
    },500);
  }
});

I can’t get it to work. Research indicates that the issue is related to Body height and HTML height set to 100%.

I am hoping The Wizards at Themeco (that’s you guys) can help with this issue.

Thank you,

b

#2

Hello @brocknessmonster,

Thanks for writing in!

Try this modified code:

document.addEventListener("DOMContentLoaded", () => {
  if (window.location.hash) {
    // Allow scrolling
    document.body.style.overflow = 'unset';
    document.documentElement.style.overflow = 'unset';
    
    setTimeout(() => {
      const targetId = window.location.hash.substring(1);
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        // Get navbar height dynamically
        const navbar = document.querySelector('nav, .navbar, .header'); // Adjust selector
        const navbarHeight = navbar ? navbar.offsetHeight : 80; // Fallback to 80px
        
        const targetPosition = targetElement.offsetTop - navbarHeight;
        
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        });
      }
    }, 500);
  }
});

Adjust navbarHeight or the navbar selector according to your actual navbar height/class!

Hope this helps.

1 Like
#3

That did it. I only added a variable to detect triggering of the setTime() code and then prevent the code from running again after initial page load.

 let scrollState = false;
  if (window.location.hash && scrollState != true) {
    // Allow scrolling
    document.body.style.overflow = 'unset';
    document.documentElement.style.overflow = 'unset';
    
    setTimeout(() => {
      const targetId = window.location.hash.substring(1);
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        // Get navbar height dynamically
        const navbar = document.querySelector('header.x-masthead'); // Adjust selector
        const navbarHeight = navbar ? navbar.offsetHeight : 80; // Fallback to 80px
        
        const targetPosition = targetElement.offsetTop - navbarHeight;
        
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        });
        scrollState = true;
      }
    }, 500);
  }

themeco wizards are the best. :+1:

#4

Hello @brocknessmonster,

Nice work adding that variable to control the setTime() trigger — great solution. Thanks for the kind words! We’re happy to help anytime.

Thanks

1 Like