For website creation, I have a taskbar using the nav tag, if I scroll down I want it to change the color, how do I do that?

Answer 1

This is usually done with JavaScript. The basic principle is to have a listener on the scroll position (y-axis) and apply css-classes accordingly.

There isn't a clean way to achieve this in CSS alone, but you can come close by placing your nav bar above a background you scroll out of while the fixed nav bar stays where it is with transparent background. You wrap a third (also fixed) element around this "construction" with a different background.

You should now have three layers:

1. Fixed background

2. Initial background

3. Transparent nav-bar

Loading the page, you will now see the initial background (2). As soon as you scroll the initial background (2) will scroll out of sight, revealing the fixed background (1).

As a last step, you can look into the "scroll snap" specifications to make the effect cleaner.

However, as stated before, this is a classical JS job.