Bedford - fixed nav on scroll

Hey! Wondering if I could get some code help on the site I design. https://www.zdigital.com/

I want to fix the nav to the top of the page when a user scrolls past the header, turning into a new color. #333333

Could not get the code in other posts to work for me on my site.

I already have the following in CSS for other things. Not sure if I would need to change any of It if I'd need to 

body { text-align: justify };
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;  
};
.collection-5e150xxxxx .transparent-header.view-list .banner-thumbnail-wrapper,
.transparent-header.collection-type-page .banner-thumbnail-wrapper {
 padding: 120px 0 80px;
};
.sqs-block.form-block .form-wrapper input[type=submit],  {
background-color:#044971; color:#fff} 

.sqs-block.form-block .form-wrapper:hover input[type=submit],  {
background-color:#066399;color:#FFF };