Learn how to create dynamic headers that change on scroll using Elementor's sticky header feature. With this effect, your header will stay visible as you scroll down, but you can customize it to change styles or content when scrolling past a certain point. Perfect for creating engaging and interactive website designs.
How to do this is nicely explained in the accompanying video
Transparent header class:
header-1
Sticky header class
header-2
Effects Offset
210
CSS
.header-2 {
transform: translatey(-150px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: none!important;
}
transform: translatey(-150px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: none!important;
}
