Custom top horizontal topbar scrollbar as per the vertically window scroll from javascript

To create a custom horizontal top bar scrollbar that is synchronized with the vertical scrollbar of the window using JavaScript, you can follow these steps:

• Create a container element for the top bar and set its position to fixed and top to 0, so that it stays fixed at the top of the window.
• Create a child element inside the container that will serve as the scrollbar.
• Set the child element's width to 100% and its height to a desired value (e.g. 10px) to create a horizontal scrollbar.
• Add event listeners to the window object to listen for the "scroll" event. When the event is triggered, get the current scroll position of the window using window.scrollY and use it to calculate the position of the scrollbar.
• Update the position of the scrollbar by setting its left CSS property using the calculated position.