Question

我正在尝试编写一个小脚本，该脚本应在当前节的偏移量<= 0时更改活动选项卡。我在每个滚动事件上运行一个函数，该函数应获取主体中每个节和计算当前距离-如果距离为0，则应更新该距离，并应将适当的元素设置为活动状态。

我在网上搜索并找到了解决方案-但是距离没有改变，并且保持不变。

function scrollPage() {
      var sections = document.getElementsByTagName('section');
    for (var i = 0; i < sections.length; i++) {
        console.log(sections[i].offsetTop - document.body.scrollTop);
    }
}

html {
    width: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.body {
    position: absolute;
    height: auto;
    width: auto;
    padding-top: 32px;
    padding-bottom: 8px;
    margin: 48px 0 72px 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
}

<html>
<body>
<div class="body" onscroll="scrollPage()">
<section id="section1">
<h1>Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section2">
<h1>Other text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
</div>
</body>
</html>

我知道可以使用JQuery执行此操作-但是我想避免使用JQuery，所以如果有人指出我的错误，我将很高兴。

最诚挚的问候，谢谢你

javascript获取距div顶部的元素的当前距离

0 个答案: