How to change the header section's background color when in a fixed position.

In Divi, any element (Section/Row/Module) can be set to be fixed on the screen. Usually, the Header's Section is set to be Fixed so that the entire section stays fixed when the site's visitor scrolls through the page's content.

There are two main ways of changing the background color of a Header's section when it stays fixed at the top of the page.

Using the Scroll Effects > Sticky
Using the Position > Fixed

Both methods have similar results. However, using Scroll Effects > Sticky has its benefits, whereas using Position > Fixed requires custom JS and CSS Code to make the background color change possible.

Using Sticky at Top scrolling effects to change the Header's Background color

Open the Section's Settings
Go to Advanced Tab
Open the Scroll Effects option group
Set the Sticky Position to Sticky to top

With the section being Sticky to the Top, we can use the Sticky state to change the Background Color.

Change the Background color of the Section in Sticky State

Go to the Content Tab
Open the Background Options Group
Hover over the Background title
Enable the Sticky State(the 4th icon displaying)
Set the Background Color for the Desktop (no. 1) and Sticky state (no. 2).

Set different Background colors for Desktop and Sticky State

Video explaining all the above steps

Using Position > Fixed to change the Header's Background color

Unlike the Stick to Top method, the Fixed Position will not allow us to easily change the section's styles. In this case, we must use custom CSS and JS codes to make this happen.

Open the Section Settings
Go to Advanced Tab > CSS ID & Classes > CSS Class and type in divi-fixed-section - This will be a custom CSS class that is going to be used in both the JS and CSS Code later
Go to Advanced Tab > Position and set the position to be Fixed
Set the Location to be Top Center
Set the Z Index to be 3

Note: By using the Fixed Position, everything that is after the first Row (which has the Position Fixed) will be overall and the result will be:

To fix that, we need to set a margin-top for the second section in our layout. The value of the margin-top should be equal to the height of the first section.

In Divi > Theme Option > Integration tab > Header, add this JS code

<script>
(function ($) {
	$(document).ready(function () {
		$(window).scroll(function () {
			var scroll = $(window).scrollTop();
			if (scroll >= 50) {
				$('.divi-fixed-section').addClass('divi-fixed-header-section');
			} else {
				$('.divi-fixed-section').removeClass('divi-fixed-header-section');
			}
		});
	});
})(jQuery);
</script>

The value 50 represents how much the visitor should scroll into the page before we apply the class divi-fixed-header-section which will change the Background Color.

If you want that change to happen earlier, decrease the 50 value. If you want that change to happen later, increase the 50 value.

In Divi > Theme Options > General Tab > Custom CSS, add the following code:

/*Set the Background color for the Section when it is not fixed*/
.divi-fixed-section {
	background: yellow;
	-webkit-transition: background-color 2s ease-out;
	-moz-transition: background-color 2s ease-out;
	-o-transition: background-color 2s ease-out;
	transition: background-color 2s ease-out;
}
/*Set the Background color for the fixed Section when scrolling*/
.divi-fixed-section.divi-fixed-header-section {
	background-color: green;
	-webkit-transition: background-color 2s ease-out;
	-moz-transition: background-color 2s ease-out;
	-o-transition: background-color 2s ease-out;
	transition: background-color 2s ease-out;
}

Note: In the above CSS code, the value for the background-color can be changed to your desired colors.

How to enable the Fixed Navigation Bar on Tablets and Mobile devices

Adding Overlay To Video Background

Changing Fixed Header Background And Size

Divi Sticky Options

How to create a transparent and fixed Header layout that overlaps the page's content