Create Sticky and Transparent Header on Wix Website
Wix-Sticky-Header
Create Sticky and Transparent Header on Wix Website

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.

Sticky and Transparent Header for Wix Website

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

Step2: Enable Dev Mode on your backend.

Step2: Turn on Dev Mode

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.

Header2 (Scrolling Header ID & Default Values)

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.

SHARE

Share on facebook
Share on twitter
Share on whatsapp
Share on linkedin
Share on telegram
Share on email

1 thought on “Create Sticky and Transparent Header on Wix Website”

  1. Check out 1this guide on how to get diamonds in cooking fever for free

    gddd23jas
    This game is more fun when you have unlimited diamonds.If you like phone games like this you need to check out this link

Leave a Comment

Your email address will not be published.

You might also enjoy