I have a block that appears after scrolling 1000px on the page

const navShareLink = document.getElementById('navShareLink');
document.addEventListener('scroll', function(e) {
  if(window.scrollY > 1000 && window.innerWidth > 576) {
    navShareLink.style.display = "block";
  } else {
    navShareLink.style.display = "none";
  }
});

But when it reaches the end of the page where the footer is, I need it to hide back so that it does not climb into the footer

It's easy to do if the page has the same height, but for me it can be either 2500px or 5000px

Is it possible to somehow count the pixels in reverse order, but not from the beginning of the page, but let's say 300px from the end?

In my example, I try to get the height of the page and subtract 300px from it to set the desired value

const navShareLink = document.getElementById('navShareLink');
let pageHeight = document.documentElement.scrollHeight;
let endPageHeight = alert(pageHeight - 300);

document.addEventListener('scroll', function(e) {
  if(window.scrollY > 1000 && window.innerWidth > 576) {
    navShareLink.style.display = "block";
  } 
  else if(window.scrollY > endPageHeight && window.innerWidth > 576) {
      navShareLink.style.display = "none";
  }
  else {
    navShareLink.style.display = "none";
  }
});

But this line document.documentElement.scrollHeight; does not accept a numeric value, but displays this number on the page in a popup tab, and actually nothing works further