Sticky sidebar | Floating column – Bricks Builder

In this post I will show you how to create a sticky sidebar in the right way, no more hiding the elements that do not fit on the screen.

Reading Time: 2 min.

Sticky sidebar | Floating column - Bricks Builder

Some time ago I was looking for a solution to have a sticky sidebar that would work well when there are many items in the sidebar.

The problem with the traditional method is that when the sidebar or column is taller than the screen size it hides the overflow items.

I come from Elementor and Crocoblocks has a plugin that works great for sticky columns https://crocoblock.com/widgets/sticky-column/ but I finally found a solution for Bricks.

The solution is not a plugin, one of the big advantages of Bricks Builder is that it is very flexible when it comes to working with custom code. Below I will explain you how to do it no matter if you have no coding knowledge:

Sticky sidebar | Floating column – Bricks Builder

1. Create your base structure with a sticky sidebar

Create your structure as follows, it is only two blocks (Main content and sticky sidebar), one container, and one parent section. Inside the container also add a code block.

It is very important that in the sticky column you add the following class: .fb-floating-aside__sticky

structure with a sticky sidebar
structure with a sticky sidebar

2. Copy and paste the following code and you will have your sticky column

Remember in the structure we added a code block, copy and paste the following code and you will have your sticky sidebar. Don’t forget to activate the code execution: https://www.youtube.com/watch?v=hdmUm7HnZgg

<script>
  /*Source: https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar*/
  
  // Verificar el ancho de pantalla al cargar y redimensionar
  function checkScreenWidth() {
    if (window.innerWidth <= 767) {
      // Si la pantalla es menor o igual a 676px, no ejecutar el código
      return;
    }

    const stickyElement = document.querySelector('.fb-floating-aside__sticky');
    const startPosition = stickyElement.getBoundingClientRect().top;

    let endScroll = window.innerHeight - stickyElement.offsetHeight - 500;
    let currPos = window.scrollY;
    let screenHeight = window.innerHeight;
    let stickyElementHeight = stickyElement.offsetHeight;
    let topGap = 40;
    let bottomGap = 40;

    setTimeout(() => {
      if (stickyElement.hasAttribute('data-top-gap')) {
        const dataTopGap = stickyElement.getAttribute('data-top-gap');
        topGap = dataTopGap === 'auto' ? startPosition : parseInt(dataTopGap);
      }

      if (stickyElement.hasAttribute('data-bottom-gap')) {
        bottomGap = parseInt(stickyElement.getAttribute('data-bottom-gap'));
      }
    }, 100);

    stickyElement.style.position = 'sticky';
    stickyElement.style.top = `${topGap}px`;
    stickyElement.style.height = 'fit-content';

    function positionStickySidebar() {
      endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap;
      const stickyElementTop = parseInt(stickyElement.style.top.replace('px', ''));

      if (stickyElementHeight + topGap + bottomGap > screenHeight) {
        if (window.scrollY < currPos) {
          if (stickyElementTop < topGap) {
            stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
          } else if (stickyElementTop >= topGap && stickyElementTop !== topGap) {
            stickyElement.style.top = `${topGap}px`;
          }
        } else {
          if (stickyElementTop > endScroll) {
            stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
          } else if (stickyElementTop < endScroll && stickyElementTop !== endScroll) {
            stickyElement.style.top = `${endScroll}px`;
          }
        }
      } else {
        stickyElement.style.top = `${topGap}px`;
      }
      currPos = window.scrollY;
    }

    function stickyElementToMe() {
      stickyElement.style.top = `${topGap}px`;
    }

    function updateSticky() {
      screenHeight = window.innerHeight;
      stickyElementHeight = stickyElement.offsetHeight;
      positionStickySidebar();
    }

    setTimeout(() => {
      window.addEventListener('resize', () => {
        currPos = window.scrollY;
        updateSticky();
      });

      document.addEventListener('scroll', updateSticky, {
        capture: true,
        passive: true
      });
    }, 1000);
  }

  // Verificar el ancho de pantalla al cargar y redimensionar
  window.addEventListener('load', checkScreenWidth);
  window.addEventListener('resize', checkScreenWidth);
</script>

Thanks to Krzysztof-Antosik for his code on Github. You can see the original code at: https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar

Related posts

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
Adding product images to Woocommerce checkout

Adding product images to Woocommerce checkout

Reading Time: 0 min.

To add images to Woocommerce checkout just add the following code to your functions.php file:

Leer artículo
Automatic FAQ Schema for Bricks Builder

Create an automatic FAQ Schema for an Nestable Accordion

Reading Time: 1 min.

I was looking for how to create a Squema type FAQ in Bricks with a nestable accordion but I didn’t…

Leer artículo