title: Hide the block at the end of the page
body: <p>I have a block that appears after scrolling 1000px on the page</p>
  <pre><code>const navShareLink = document.getElementById('navShareLink');
  document.addEventListener('scroll', function(e) {
    if(window.scrollY &gt; 1000 &amp;&amp; window.innerWidth &gt; 576) {
      navShareLink.style.display = &quot;block&quot;;
    } else {
      navShareLink.style.display = &quot;none&quot;;
    }
  });
  </code></pre>
  <p>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</p>
  <p>It's easy to do if the page has the same height, but for me it can be either 2500px or 5000px</p>
  <p>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?</p>
  <p>In my example, I try to get the height of the page and subtract 300px from it to set the desired value</p>
  <pre><code>const navShareLink = document.getElementById('navShareLink');
  let pageHeight = document.documentElement.scrollHeight;
  let endPageHeight = alert(pageHeight - 300);
  
  document.addEventListener('scroll', function(e) {
    if(window.scrollY &gt; 1000 &amp;&amp; window.innerWidth &gt; 576) {
      navShareLink.style.display = &quot;block&quot;;
    } 
    else if(window.scrollY &gt; endPageHeight &amp;&amp; window.innerWidth &gt; 576) {
        navShareLink.style.display = &quot;none&quot;;
    }
    else {
      navShareLink.style.display = &quot;none&quot;;
    }
  });
  </code></pre>
  <p>But this line <code>document.documentElement.scrollHeight;</code> does not accept a numeric value, but displays this number on the page in a popup tab, and actually nothing works further</p>