Category scroll bar which moves shown category into view

How To
1

Hi, I’m wondering how would I approach the functionality of a category scroll bar, which would move to show the current category you are in.
I currently have a query loop which goes through all my product categories and each category has a query loop to show all products of that category.
On mobile I have a category scroll bar at the top which is populated via a query for the categories and all the texts anchor links to their sections.

Screenshot_61
Screenshot_61398×866 69.1 KB

The issue, when a user scrolls down couple categories, their active category is no longer visible on the top scroll bar, I want it the top scroll bar to scroll according to the category show on screen. I’ve been trying many JS custom code solutions however I can’t crack it.
Live example of what I’m trying to achieve would be like this website Dserve
Or ubeareats has this https://www. ubereats .com/store/mcdonalds-7th-alameda/epVmI4bLR0OIrHZ75C1xSw?diningMode=DELIVERY
Or even wolt food https:// wolt .com/lt/ltu/kaunas/restaurant/mcdonalds-karaliaus-mindaugo-pr

2

I seemingly have built a solution for this to work in bricks with the dynamic queries, I’ll leave my JS code for those who might stumble into the same question.
I am using scroll into view by GitHub - KoryNunn/scroll-into-view: Scrolls an element into view if possible because the vanilla browser scrollintoview appears to not work on chrome currently with smooth scroll. The intersection observer disconnects to not get stuck while going to the anchor link position.

document.addEventListener('DOMContentLoaded', function() {
    
    var textWidth = document.querySelector('#{term_slug}').offsetWidth;
    
    const viewportHeight = window.innerHeight;
	
    // Calculate navbar height (replace 'navbar' with the actual ID or class name of your navbar element)
    const navbarHeight = document.querySelector('#brxe-rdudsd').offsetHeight;

    // Calculate category bar height (replace 'category-bar' with the actual ID or class name of your category bar element)
    const categoryBarHeight = document.querySelector('#brxe-yzzygw').offsetHeight;

    // Calculate the desired rootMargin value
    const rootMarginValue = `-14% 0% -${viewportHeight - navbarHeight - categoryBarHeight}px 0%`;
        
    let options = {
  rootMargin: rootMarginValue,
  threshold: 0,
	};
	
    let callback = (entries, observer) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting)
    {
    console.log("touch {term_slug}");
      
      const element = document.getElementById('{term_slug}');
      const activeElements = document.querySelectorAll('.activecategory');
activeElements.forEach(element => {
  element.classList.remove('activecategory');
});
      element.classList.add('activecategory');
      
      scrollIntoView(element,{
      time: 250,
      align:{
        left: 0,
        lockY: true
    }
      })
      
      
    }
    
  });
	};
    
	let observer = new IntersectionObserver(callback, options);
  let target = document.getElementById('brxe-zjbqlu+{term_slug}')
  console.log(target);
	observer.observe(target);
    
    
    document.querySelector('#brxe-yzzygw').addEventListener('click', (event) => {
        // Disconnect the IntersectionObserver when #brxe-yzzygw is clicked
        observer.disconnect();
        
        // Reconnect the IntersectionObserver after half a second
        setTimeout(() => {
            observer.observe(target);
        }, 750);
    });
});