Navbar switch on scroll + Pseudo elements for layering design effect

Hi Webflow Wizards!
I’d love your help. I’m really inspired by two elements I found on a website designed with Elementor and would love to know how to replicate those effects on webflow.
this is the site I’m referring to: https://www.vanessalau.co/

  1. The sticky navbar that appears when the main navbar scrolls out of view then re-appears when I scroll back up (I tried so many ways… and read a ton of posts here and still could not figure out how to do it). Assuming it’s not too complicated because I know it’s a very common navbar effect.

  2. The cool layering effect, of the background and uneven squares… I’m assuming by the code, it’s done with pseudo-elements ( ::before and ::after ) but not 100% sure what the best would be to get that kind of style done in Webflow.

PS - Please explain in a way that could be easily understood, I’m not as pro a developer as many of you, but I love getting better!
PSS - Disclaimer: The example website above doesn’t belong to me. I am only attempting to replicate it for my own webflow practice, for learning purposes and it will not be published. I will use the knowledge I gain to create my own designs, using some similar elements or effects.


Here is my site Read-Only: https://preview.webflow.com/preview/yahli?utm_medium=preview_link&utm_source=designer&utm_content=yahli&preview=2612ceb22b4a6254ced02f8a172a6d0e&mode=preview