Fatal编程技术网
  • javascript/
  • 在不移动窗口的情况下，如何使用JavaScript检测div的滚动距离？

在不移动窗口的情况下，如何使用JavaScript检测div的滚动距离？

javascript jquery html css navigation

在不移动窗口的情况下，如何使用JavaScript检测div的滚动距离？,javascript,jquery,html,css,navigation,Javascript,Jquery,Html,Css,Navigation,我有一个可以工作的JavaScript函数，它可以检测我滚动到的页面的哪个点，导航栏通过改变与我所在部分相匹配的单词的颜色来响应这一点 从那以后，我添加了一些视差背景，这意味着将所有站点内容都封装在中，以创建视差效果（不包括导航栏本身）。要删除右侧的双滚动条，我将html和body标记设置为溢出：隐藏，这对于视差非常有效 但是，我的导航栏不再显示页面上的位置 我花了很长时间才从理论上解释为什么它停止工作（我只学了一周的html、css和一点JS，所以我有点慢）。大概是因为我的内容（包括告诉导航栏

我有一个可以工作的JavaScript函数，它可以检测我滚动到的页面的哪个点，导航栏通过改变与我所在部分相匹配的单词的颜色来响应这一点

从那以后，我添加了一些视差背景，这意味着将所有站点内容都封装在
中，以创建视差效果（不包括导航栏本身）。要删除右侧的双滚动条，我将html和body标记设置为
溢出：隐藏
，这对于视差非常有效

但是，我的导航栏不再显示页面上的位置

我花了很长时间才从理论上解释为什么它停止工作（我只学了一周的html、css和一点JS，所以我有点慢）。大概是因为我的内容（包括告诉导航栏何时更改颜色的锚定点）都包装在滚动的
中，所以在JS函数中使用
$（window）
部分是无用的，因为从技术上讲，窗口是静态的，而
内容是滚动的

所以我的问题如下：有没有一种方法可以让JS函数监视锚，例如，当锚通过它所包含的
的顶部时？

事后想一想，因为我对所有这些编码都不熟悉，而且它仍然有点难以承受，所以调整视差方法是否更实际，这样我就不必在
中包含站点内容

这是我在
$（窗口）
部分使用的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>





    

  • 

  • 

  • 


大量文本

大量文本

大量文本

大量文本

大量文本

大量文本

大量文本

大量文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本

更多文本




这是网站的总体布局，
是我在JavaScript中使用的。因此，当锚定位于屏幕顶部时，它会将
class=“active”
添加到匹配的导航链接。
您必须将$（窗口）更改为滚动的$（'div'）
例如，此示例显示div.ex1的滚动量

document.querySelector（'.ex1'）.scrollTop




第ex1分部{
背景颜色：浅蓝色；
宽度：110px；
高度：110px；
溢出：滚动；
}
函数myFunction（）{
document.querySelector（'h2-strong'）.innerHTML=document.querySelector（'.ex1'）.scrollTop；
}
计数：
这是一位杰出的领袖，他是一位伟大的领袖。

有没有办法检查div的滚动位置而不是while窗口？发布你的HTML结构的简化版本会很有帮助，我会编辑我的原始帖子并添加一些HTML，谢谢asmanp，谢谢你的回答！这似乎是在正确的轨道上-我已经在我的网站工作，这样我就可以看到滚动量，就像在你的例子。然而，现在我正在寻找一种方法来改变导航栏链接的颜色，当数字达到一定数量时，这一部分让我感到困惑！我需要一种类似于“如果滚动计数>=1000，则将类“活动”添加到导航栏链接1。如果滚动计数>=2000，则将类“活动”添加到导航栏链接2”的方式。对于所有导航栏链接，依此类推。更新：我使用以下命令使其工作：
if（（ScrollTop>800）&&（ScrollTop<2000）&$（'.navlink'）.hasClass（“点击”）{$（'.navlink'）.removeClass（'active'）$（'#link1'））.addClass（'active'）；}
JavaScript中有点混乱，因为我没有足够的经验来了解如何压缩它，但它是功能性的。感谢@asmanp2012的提示。有关更多信息，请查看