How to transition a navbar from transparent to solid on scroll using Framer Motion?

I'm trying to create a smooth transition for my navbar in Framer Motion so that it starts as transparent and becomes solid when the user scrolls down.

What's the best way to achieve this effect? Should I use useScroll and useTransform, or is there a better approach? Also, how can I ensure the animation is smooth and performance-friendly?

Would love to see any examples or best practices! Thanks in advance.