How can I make content behind a partly transparent navbar disappear?

I have a partly transparent navbar on top of my page:

.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: rgba(212, 0, 255,0.3);
}

The background of the page is a canvas.

The problem is that when i scroll down, the content doesn't disappear behind my navbar because the navbar is partly transparent. I only want the page background and the navbar show up in the navbar area and not the content