Нужно, чтобы при появлении футера в зоне видимости экрана отработало событие, при этом высота хедера и контентной части могут быть разные.
var headerHeight = document.querySelector("header").clientHeight;
var contentHeight = document.querySelector(".content").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
header {
height: 100px;
background: #ccc;
}
.content {
background: tomato;
height: 2000px;
}
footer {
height: 400px;
background: #222;
}
<header>
header
</header>
<div class="content">
content
</div>
<footer>
footer
</footer>