I am attempting to calculate the distance between the top of an element and the top of the page every time the user scrolls. Although I have managed to make it work, the issue arises when scrolling - the distance remains unchanged. I tried addressing this by implementing a closure, but my understanding of closures is limited. A demonstration of my progress can be found here: It logs the distances in the console.
I understand that there may be simpler solutions available, but I am eager to identify where I might be going wrong. Would anyone be able to assist me with this?
Below is the code I have been working on:
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>FitGrid</title>
<link rel="stylesheet" href="fitgrid.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="fg12">Addison Bean.</h1>
<div class="row">
<h2>Article</h2>
<hr class="fg6">
<hr class="fg6 hidden">
<p class="fg6">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe qui...and so on
</div>
<div class="row">
<p class="fg6">3. Another set of dummy text...</p>
<p class="fg6">4. Yet another set of placeholder text...</p>
</div>
<div class="row">
<p class="fg6">5. Additional filler for testing purposes.. .</p>
<p class="fg6">6. More temporary content for layout checking...</p>
</div>
<div class="row">
<p class="fg6">7. Continuation of test material...</p>
<p class="fg6">8.Test text goes here...</p>
</div>
</div>
<script>
var elem = document.getElementsByTagName('h2')[0];
function determineScrollOffset(el) {
function getWindowOffset() {
var woff = el.getBoundingClientRect().top,
soff = window.pageYOffset;
var dist = Math.round(woff + soff);
console.log(dist);
}
return getWindowOffset;
}
window.onscroll = determineScrollOffset(elem);
</script>
</body>
</html>