What Is It?

Let me show you what it is first.

If you scroll the page, you can notice the menu follows.

There are two ways to do this.

Way 1: Using "Element.animate()"

This method is used in the above example. It is using CSS animation in the form of JavaScript.

Be careful that arguments of 'animate' should be in the addEventListener.

Way 2: Using "HTMLElement.style.transform=translateY()"

In the below example, this method is used.

Transition features such as delay, duration, or timing-function are written in CSS.

Way 1 vs. Way 2

It seems to me that the menu moves more softly using way 1 than way 2. If you see [Chrome DevTools > Elements] while scrolling, there is no change in way 1 and the <ul>'s style attribute changes in way 2.

Way 1 can't be used in IE.

Way 1 is more complicated than way 2.