获取元素与文档顶部之间的距离

Getting the distance from an element and top of the document

本文关键字：之间 距离 顶部 文档 元素 获取      更新时间：2023-09-26

每次用户滚动时，我都试图获取元素顶部和页面顶部之间的距离。我让它工作，但当你滚动时，它会显示距离没有改变。我试着用闭包来解决这个问题，但我对闭包不是很在行。到目前为止，我在这里有一个演示：http://addisonbean.com/test/它在控制台中记录距离。

我知道有一种更简单的方法可以做到这一点，但我真的很想知道我做错了什么。有人能帮我吗？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FitGird</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 quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
    </div>
    <div class="row">
    <p class="fg6">3. 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 quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
    <p class="fg6">4. 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>
    </div>
    <div class="row">
    <p class="fg6">5. 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">6. 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 quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
    </div>
    <div class="row">
    <p class="fg6">5. 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">6. 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 quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
    </div>
    <div class="row">
    <p class="fg6">5. 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">6. 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 quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
    </div>
    <div class="row">
    <p class="fg6">5. 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">6. 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 quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
    </div>
</div>
<script>
    var elem = document.getElementsByTagName('h2')[0];
    function makeScrollOffset(el) {
        function getWindowOffset() {
        var woff = el.getBoundingClientRect().top,
            soff = window.pageYOffset;
        var dist = Math.round(woff + soff);
        console.log(dist);
    }
    return getWindowOffset;
}
window.onscroll = makeScrollOffset(elem);
</script>
</body>
</html>

对于您的代码，它应该是：

var dist = Math.round(woff-soff);

此处的示例

这非常有效，并返回距离：

window.onscroll = function ()
{
    console.log(document.getElementsByTagName('h2')[0].getBoundingClientRect().top);
}

请注意，负数表示所选元素位于视口顶线上方，正数表示该线下方。如果得到数字0，则元素的顶部与视口的顶线完全对齐。

相关文章：