Having problem making navbar sticky


So I have been trying to do 2 things with my navbar. One being is to make the navbar transparent and when you scroll down it changes to a color (black). I managed to get that to work but I had one problem, my navbar wasn’t sticky. BUT whenever I turn my navbar into sticky it separates itself from the top hero and turns it all white. I am not entirely sure why it is doing that any thoughts?? I am using a layout template for the Navbar so I am wondering if that is what’s causing the conflict.

Here is my link:

Here is my public share link: LINK
(how to access public share link)