Creating a sticky and transparent header for Wix or WordPress websites often requires the integration of some external codes. Follow the steps below to create a very appealing sticky and transparent header for a Wix website.

Step1: From the header scroll setting settings select “Freezes”

Step2: Enable Dev Mode on your backend.

Step3: Create 2 headers and give them the IDs Header1 (Default Header), and Header2 (The scrolling Header). Set the default value for Header2 as hidden, since that’s the scrolling header.

Step3: Create a classic strip below the header, give it the ID “Trans” Means header transition point, and check the button to show it on all pages

Step4: Go to Home Page Codes and add the below codes as you see them.

$w.onReady(function () {
	// Write your JavaScript here

	// To select an element by ID use: $w('#elementID')

	// Click 'Preview' to run your code

	$w("#trans").onViewportLeave(() => {
		$w("#Header2").show();
		$w("#Header1").hide();
	})

	$w("#trans").onViewportEnter(() => {
		$w("#Header1").show();
		$w("#Header2").hide();
	})

});

Step5: Save and publish your site.