I'm trying to make a horizontal menu that is moving to the left-right (kind of a spyscroll) as you move through the app. Currently I have only underline and text colour change because I didn't know how to make it "scroll" as you move down the app... Does anyone have an idea how to do that? Thank you in advance.

Attached image: Menu and App image

CodePudding user response：

Refer this video

set active class name for each section in the header and get the scroll value from the event listener and use conditions to apply the active class name

CodePudding user response：

I would say the most common way of changing an element based on scrolling is to use Intersection observer. Using intersection observer you can specify what should happen when a certain element is not visible/visible/visible partialy. The second method I can think of is to manually calculate the position of window:

window.pageYOffset

And set a condition like so:

if(window.pageYOffset > XX){}

CodePudding user response：

Add a listener to element which has the vertical scroll.

 verticalScrollEl.addEventListener("scroll", (e) => {
    horizontalScrollEl.scrollLeft = e.target.scrollLeft;
 });