I have coded a professional, highly tested solution for this as well if you'd like to try.
You can download/install it for free under 1 minute, just click here to read the tutorial.
Besides that you also have options to turn it on/off at the customize page, even to allow it only on desktop or mobile depending on your needs.
I followed option 1 to add the sticky header, but I need to temporarily stop using the sticky header. When I comment out all the code I added for the sticky header in the theme.js and theme.scss.liquid and save, the header is still sticky on the published website. Would you kindly let me know what else I may need to do to remove the sticky header?
Thanks so much!
I added the Part 2 of the code given in the original post. The navigation menu is sticking and the announcement bar moves but as you scroll it shows the background above the navigation menu instead of the navigation moving up and replacing the announce
ment bar. See photo.