如何在没有窗口移动的情况下使用JavaScript来检测div的滚动距离？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在没有窗口移动的情况下使用JavaScript来检测div的滚动距离？相关的知识，希望对你有一定的参考价值。
我有一个有效的javascript函数，可以检测我滚动到的页面的哪个点，导航栏通过更改与我所在部分相匹配的单词的颜色来响应。
从那时起，我添加了一些视差背景，这意味着将<div>中的所有网站内容包含起来以创建视差效果（不包括导航栏本身）。要删除右侧的双滚动条，我将html和body标签设置为overflow: hidden，这对视差效果很好。
但是，我的导航栏不再显示页面上的位置。
我花了很长时间来理论为什么它停止工作（我只学习了一周的HTML，css和一些JS，所以我有点慢）。据推测，因为我的内容（包括告诉导航栏何时改变颜色的锚点）全部包裹在滚动的<div>中，使用JS函数中的$(window)部分是无用的，因为从技术上讲，窗口是静态的，并且<div>内容是滚动。
所以我的问题如下：JS函数是否有办法监控何时锚点，例如，它通过它所包含的<div>的顶部？
作为一个事后的想法，因为我是所有这些编码的新手并且它仍然有点压倒性，调整我的视差方法是否更实际，所以我不必在<div>中包含网站内容？
这是我使用的$(window)部分的JavaScript，我怀疑是导致问题：
$(window).on('scroll', function() {
$('.hiddenanchor').each(function() {
if($(window).scrollTop() >= $(this).offset().top
&& !$('li a').hasClass("clicked")) {
var id = $(this).attr('id');
$('#navheader li a').removeClass('active');
$('#navheader li a[id="link'+ id +'"]').addClass('active');
}
})
});
.hiddenanchor是指定网站的哪个部分是新部分的标签。因此，当该部分位于窗口的顶部时，JS函数会将class="active"添加到匹配的导航栏文本中。
我是StackOverflow的新手，所以我不想过去 - 希望现在有足够的信息可以使用，但如果有人愿意帮助需要更多的信息，我很乐意提供所需的一切。
感谢任何能够帮助我的人，请记住我只有一周的代码新手，所以请放心吧！
编辑：为上下文添加一些html。
<html>
<head>
</head>
<header>
<nav>
<ul>
<div>
<li><a href="#01">Navlink 1</a></li>
<li><a href="#02">Navlink 2</a></li>
<li><a href="#03">Navlink 3</a></li>
</div>
</ul>
</nav>
</header>
<body>
<main class="wrapper">
<section class="content">
<div class="main-div-column">
<a class="anchor" id="01">
</a>
<div class="main-div section-1">
Lots of text <br>
Lots of text <br>
Lots of text <br>
Lots of text <br>
Lots of text <br>
Lots of text <br>
Lots of text <br>
Lots of text <br>
</div>
<a class="anchor" id="02">
</a>
<div class="main-div section-2">
Lots more text <br>
Lots more text <br>
Lots more text <br>
Lots more text <br>
Lots more text <br>
Lots more text <br>
Lots more text <br>
Lots more text <br>
</div>
<a class="anchor" id="03">
</a>
<div class="main-div section-3">
Some more text <br>
Some more text <br>
Some more text <br>
Some more text <br>
Some more text <br>
Some more text <br>
Some more text <br>
Some more text <br>
</div>
</div>
</section>
</main>
</body>
</html>
这就是网站的总体布局 - <a class="anchor" id="number">就是我在JavaScript中使用的。因此，当该锚点位于屏幕顶部时，它会将class="active"添加到匹配的navlink中。
您必须将$（窗口）更改为滚动$（'div'），例如此示例显示div.ex1滚动了多少
document.querySelector（”。EX1' ）。scrollTop的
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
</style>
</head>
<body>
<script>
function myFunction(){
document.querySelector('h2 strong').innerHTML = document.querySelector('.ex1').scrollTop;
}
</script>
<h2>count: <strong></strong></h2>
<div class="ex1" onscroll="myFunction()">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>以上是关于如何在没有窗口移动的情况下使用JavaScript来检测div的滚动距离？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用 -webkit-app-region 的情况下在 Electron 中移动无框窗口