Buy Now
document.addEventListener('DOMContentLoaded', () => {
  // Espera a que todo cargue (incluido Bricks)
  window.addEventListener('load', () => {
    setTimeout(() => {
      const headerEl = document.getElementById('brx-header');
      const targetEls = Array.from(document.querySelectorAll('.fb-hide-on-scroll'));

      if (!headerEl || !targetEls.length) return;

      let headerHeight = 0;
      let addThreshold = 0;
      let removeThreshold = 0;
      let hidden = false;
      let ticking = false;

      function updateHeights() {
        headerHeight = headerEl.getBoundingClientRect().height;
        addThreshold = Math.ceil(headerHeight) + 1;
        removeThreshold = Math.max(0, Math.floor(headerHeight) - 6);
      }

      function applyHiddenClass(shouldHide) {
        targetEls.forEach(el => {
          el.classList.toggle('fb-hide', shouldHide);
        });
      }

      function onScrollRaf() {
        const scrollY = window.scrollY || window.pageYOffset;

        if (!hidden && scrollY > addThreshold) {
          hidden = true;
          applyHiddenClass(true);
        } else if (hidden && scrollY < removeThreshold) {
          hidden = false;
          applyHiddenClass(false);
        }
        ticking = false;
      }

      function onScroll() {
        if (!ticking) {
          ticking = true;
          requestAnimationFrame(onScrollRaf);
        }
      }

      updateHeights();
      window.addEventListener('scroll', onScroll, { passive: true });

      window.addEventListener('resize', () => {
        updateHeights();
        onScrollRaf();
      });

      if (typeof ResizeObserver !== 'undefined') {
        const ro = new ResizeObserver(() => {
          updateHeights();
          onScrollRaf();
        });
        ro.observe(headerEl);
      }

      onScrollRaf();
    }, 400); // <-- inicia 1 segundo después de la carga completa
  });
});
Inicio > Basics > Sticky Header - Only One Section - Bricks Builder

Sticky Header – Only One Section – Bricks Builder

John Diaz|April 18, 2023

Sometimes we want only one of the columns or sections of our header to be sticky. Bricks does not have this option by default but we can do it with only 3 lines of CSS.

Reading Time: 0 min.

Sticky Header - Bricks Builder

Here is a very short video on how to make a sticky header and hiding a section when scrolling.

Sticky Header – Only One Section

CSS Here:

.scrolling .hide{
display:none !important;
}

Related posts

John Diaz|November 2, 2024

Improving the Bricks Builder Color Palette

Reading Time: 1 min.

In this post, we’ll explore how to improve the visibility of the Bricks Builder color palette using CSS.

Leer artículo
Sticky sidebar | Floating column - Bricks Builder
John Diaz|June 25, 2023

Sticky sidebar | Floating column – Bricks Builder

Reading Time: 2 min.

In this post I will show you how to create a sticky sidebar in the right way, no more hiding…

Leer artículo
Add Buttons Inside the Menu - Bricks Builder
John Diaz|April 10, 2023

Add Buttons Inside the Menu – Bricks Builder

Reading Time: 0 min.

Many times we have several buttons in the menu and we have to hide them in the mobile version because…

Leer artículo