October 24, 2018

 

How to make a header that changes on scroll using Beaver Builder & Beaver Themer

Author: 

Cloud Care WP

Description: 

We’re going to show you how to make a header that completely changes it’s content when you scroll down and returns to normal as you scroll up. Imagine being able to display a unique call to action as a user scrolls down a page, but returns back to your default header when they begin to scroll back up. You can use this for “Add to Cart” buttons on a Product page in WooCommerce, or to customize profile pages on a membership site, and so much more! Requires Beaver Builder and Beaver Themer, along with a little bit of JS and CSS magic.

 

To get the CSS and JS for this, visit – https://cloudcarewp.com/video/make-your-header-change-on-scroll-beaver-builder-beaver-themer/



Kind:

CSS, jQuery, Beaver

CSS:

@media screen and (min-width: 769px) {
header.fl-builder-content{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 30000;
}
#header-row-a{
display: flex;
align-items: center;
height: 100px;
}
.fl-row-content-wrap{
width: 100%;
}
#header-row-a, #header-row-b{
top: 0;
left: 0;
width: 100%;
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
}

Javascript:

var header_a = document.querySelector('#header-row-a');
var header_b = document.querySelector('#header-row-b');

var posY = 0;
window.addEventListener('scroll', function(e){
if(this.pageYOffset > 855){
if(this.pageYOffset > posY){
header_a.style.transform = 'translateY(-100px)';
header_b.style.transform = 'translateY(-100px)';
}
else{
header_a.style.transform = 'translateY(0)';
header_b.style.transform = 'translateY(0)';
}
posY = this.pageYOffset;
}
});

URL: