How to create an Active Navigation Link on Scroll

How To
1

Hello everyone, does anyone know how I can change the styles of the menu links when scrolling on the website, I share a video link that explains it, I am trying to replicate it, however I have not been able to do it, greetings!

2

I am looking for it too. Did you found a solution?

3

You can mostly do this with Bricks Interactions, but there is no way around writing a little bit of Javascript.

Here’s how a solution could look like:

scroll-interactions
scroll-interactions1657×1183 95.3 KB

For CSS Selector, add the css id of the section you want to check against.

Here is the JS Code:

function checkHeaderTargetOverlap(object) {
  const source = object.source;
  const target = object.target;

  const header = document.querySelector("#brx-header");

  const rect1 = header.getBoundingClientRect();
  const rect2 = target.getBoundingClientRect();

  const isOverlapping = !(
    rect1.right < rect2.left ||
    rect1.left > rect2.right ||
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom
  );

  if (isOverlapping) {
    source.classList.add("brxe-text-link--active");
  } else {
    source.classList.remove("brxe-text-link--active");
  }
}

Every time you scroll it checks if the Bricks-Header is overlapping with, your targeted section. If it is true, it will add the class: brxe-text-link--active to your text-link-element. Change Names as you see fit

Cheers Suat