Act as a senior front-end developer with 10+ years of experience in CSS and responsive design. Guide me step-by-step on how to create a sticky header that remains fixed at the top of the page when scrolling. Include [CSS properties] like `position: sticky`, `top: 0`, and `z-index` for layering. Explain how to ensure the header is [responsive] across different devices by using media queries and flexible units like `vw` or `rem`. Also, address common pitfalls such as [performance issues] due to excessive use of `position: sticky` or conflicts with other fixed elements. Provide a clean, commented code example and best practices for cross-browser compatibility.