как при достижении переменной определенного значения получить блок div?

const specificValue = 100;
let blockShown = false;

window.addEventListener("scroll", function () {
    let currentScrollValue = window.scrollY || window.pageYOffset;

    if (!blockShown && currentScrollValue >= specificValue) {
        document.getElementById("myDiv").style.display = "block";
        blockShown = true;
    } else if (blockShown && currentScrollValue < specificValue) {
        document.getElementById("myDiv").style.display = "none";
        blockShown = false;
    }
});

body {
    height: 1000px;
}

.parent-container {
    position: relative;
    height: 100%;
}

.my-div {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: black;
    color: white;
    text-align: center;
    padding: 10px;
}

<div class="parent-container">
  <div id="myDiv" class="my-div">
    Этот блок будет появляться при достижении определенного значения переменной.
  </div>
</div>