Swap Headers on Scroll in Beaver Builder/Beaver Themer #beaverbuilder #beaverthemer

scrolled-header-code.js

/* JS for scrolled header: */

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

var posY = 0;
window.addEventListener('scroll', function(e) {
  //how far down you scroll
    if (this.pageYOffset > 855) {
      if (this.pageYOffset > posY) {
        //use the size of your header here
        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;
  }
});


/* CSS for scrolled header: */

<style>
@media screen and (min-width: 769px) {
  body:not(.fl-builder-edit) header.fl-builder-content{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Change to the size of your header */
    height: 100px;
    overflow: hidden;
    z-index: 30000;
  }
  body:not(.fl-builder-edit) #header-row-a:not(.fl-builder-edit){
    display: flex;
    align-items: center;
    /* Change to the size of your header */
    height: 100px;
  }
  body:not(.fl-builder-edit) .fl-row-content-wrap:not(.fl-builder-edit){
    width: 100%;
  }
  body:not(.fl-builder-edit) #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;
  }
}
</style>