Changing Header background with parallax scroll

1 reply · opened Sep 26, 2016

LLancipoosSep 26, 2016

Hi,

We have a home page - currently using a background image on the <section id=slider> declared inline on the element and it's 600px high. The <header> containing the logo and the <nav> has a transparent background - which is as we need it. We have the slider-parallax class active on the <section id=slider>

What we'd like to do is keep the <header> transparent until the point where it starts to come off the <section id=slider> background image.
We've tried adding a background color to the id="header-wrap" and it kind of does what we want - it's transparent on load and then changes to a colored background. Only this happens as soon as you scroll - the background switched on. Is there a way to make this happen later in the scroll?

Thanks.

SSemicolon WebSTAFFSep 29, 2016

Hello,

This is Definitely Possible. Please consider adding the following CSS Code:

@media (min-width: 992px) {
	#header #header-wrap {
		z-index: 199;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #FFF;
		-webkit-transition: height .4s ease, background-color .4s ease, opacity .3s ease;
		-o-transition: height .4s ease, background-color .4s ease, opacity .3s ease;
		transition: height .4s ease, background-color .4s ease, opacity .3s ease;
	}

	#header.transparent-header:not(.sticky-header) #header-wrap { background-color: transparent; }
}

And then add the data-sticky-offset="600" Attribute to the <header> Tag.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard