Use page coordinates in elementFromPoint?

Question

I need to know what element sits at the very bottom of the page (usually a <footer> but it can be something else). So I know I can use document.elementFromPoint() but only if the user has scrolled to the bottom because that function uses client coordinates not page coordinates. See my example below, both elements should have green text but only one does.

Is there a way to find an element at a given page coordinate?

$(document).ready(function() {
  var body = document.body,
      html = document.documentElement;

  var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );

  // Find "Top element"
  $(document.elementFromPoint(10, 30)).css('color', 'green');

  // Find "Bottom element"
  $(document.elementFromPoint(10, height-10)).css('color', 'green');
});

html, body {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
  position: relative;
}

h1 {
  background-color: blue;
  display: block;
  width: 100%;
}

.footer-ele {
  position: absolute;
  bottom: 0;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Top element</h1>

<h1 class="footer-ele">Bottom element</h1>