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 };

Have you fixed yet?

We have not

Fix the nav to the top of the page when a user scrolls past the header,

you can use CSS

header#header {
    position: fixed !important;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
}

turning into a new color

You need to use JavaScript, complicated

On 3/14/2020 at 5:43 AM, tuanphan said:

Fix the nav to the top of the page when a user scrolls past the header,

you can use CSS

header#header {
    position: fixed !important;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
}

turning into a new color

You need to use JavaScript, complicated

I am also interested in a similar feature. Currently I have the correct CSS installed to make the header sticky but I would like additional code so the header background color it increases in opacity once it is scrolled past the banner image. Is there anywhere to find a solution for this?

On 3/22/2021 at 8:47 AM, Peakwalker said:

I am also interested in a similar feature. Currently I have the correct CSS installed to make the header sticky but I would like additional code so the header background color it increases in opacity once it is scrolled past the banner image. Is there anywhere to find a solution for this?

Hi. Can you share link to your site? We can check easier