How to blur on scroll using Dom7?

Question

im having a hard time trying to blur a div on scroll, this is my code so far :

i find dom7 very confusing, note that im a beginner , feel free to roast me

document.addEventListener("DOMContentLoaded", function () {
  var pageBg = Dom7.$(".page-bg");
  var lastScrollTop = 0;
  var blurValue = 0;

  window.addEventListener("scroll", function () {
    var currentScrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;

    if (currentScrollTop > lastScrollTop) {
      // Scrolling down
      blurValue += 0.5;
      if (blurValue > 10) {
        blurValue = 10;
      }
    } else {
      // Scrolling up
      blurValue -= 0.5;
      if (blurValue < 0) {
        blurValue = 0;
      }
    }

    pageBg.style.filter = "blur(" + blurValue + "px)";
    lastScrollTop = currentScrollTop;
  });
});

i tried using console.log to see if its reading the script, this is my conclusion:

document.addEventListener("DOMContentLoaded", function () {

    /CONSOLE LOG HERE WORKS FINE/

  var pageBg = Dom7.$(".page-bg");

/ CONSOLE LOG ANYWHERE PAST HERE DOESNT WORK/

This is my less code :

.page-bg {
  background-image: url("../imgs/hero-bg.jpg");
  background-size: cover;
  position: absolute;
  opacity: 1;
  background-position: center;
  min-height: 70vh;
  top: 0;
  width: 100%;
  background-repeat: no-repeat;
  z-index: -1;
  filter: blur(0);

  &::after {
    content: "";
    height: 100vh;
    width: 100%;
    position: absolute;
    background: #000000;
    background: -webkit-linear-gradient(
      360deg,
      #000000 0%,
      rgba(188, 71, 255, 0) 100%
    );
    background: linear-gradient(360deg, #000000 0%, rgba(188, 71, 255, 0) 100%);
    bottom: 0;
    backdrop-filter: blur(var(--blur)); /* Use CSS variable for blur effect */
  }
}

Answer 1

Well I have constructed a snippet. It works. use document.querySelector to select HTMLElements. If you insist on using the library, then if it's like jQuery I think pageBg[0] would work.

document.addEventListener("DOMContentLoaded", function() {
  var pageBg = document.querySelector(".page-bg");
  var lastScrollTop = 0;
  var blurValue = 0;

  window.addEventListener("scroll", function() {
    var currentScrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;

    if (currentScrollTop > lastScrollTop) {
      // Scrolling down
      blurValue += 0.5;
      if (blurValue > 10) {
        blurValue = 10;
      }
    } else {
      // Scrolling up
      blurValue -= 0.5;
      if (blurValue < 0) {
        blurValue = 0;
      }
    }

    pageBg.style.filter = "blur(" + blurValue + "px)";
    lastScrollTop = currentScrollTop;
  });
});

.page-bg {
  background-image: url("../imgs/hero-bg.jpg");
  background-size: cover;
  position: absolute;
  opacity: 1;
  background-position: center;
  min-height: 70vh;
  top: 0;
  width: 100%;
  background-repeat: no-repeat;
  z-index: -1;
  filter: blur(0);
}

.page-bg::after {
  content: "";
  height: 100vh;
  width: 100%;
  position: absolute;
  background: #000000;
  background: -webkit-linear-gradient( 360deg, #000000 0%, rgba(188, 71, 255, 0) 100%);
  background: linear-gradient(360deg, #000000 0%, rgba(188, 71, 255, 0) 100%);
  bottom: 0;
  backdrop-filter: blur(var(--blur));
  /* Use CSS variable for blur effect */
}

<div class="page-bg" style="width: 100px; height: 100px; border: 1px solid red; position:sticky; background: url('https://picsum.photos/100')">
</div>

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf

<h1>content of page</h1>
sdflksdjf sldfjsldf