Javascript jquery根据div位置将addClass/removeClass添加到导航链接

我试图通过检测一个具有特定id的div来为导航中的链接添加一个类，每个div位于不同的页面上，位于顶部

如果我对每个实例都使用它，则分别更改div和class

$(document).on("scroll ready", function() {
    if ($(this).scrollTop()>=$('#contact').position().top){
        $("#nav .contact a").addClass("ur-here");
    }
});

除非我像这样反复使用代码，否则代码是有效的

$(document).on("scroll ready", function() {
    if ($(this).scrollTop()>=$('#contact').position().top){
        $("#nav .contact a").addClass("ur-here");
    }
});

$(document).on("scroll ready", function() {
    if ($(this).scrollTop()>=$('#blog').position().top){
        $("#nav .blog a").addClass("ur-here");
    }
});

在这一点上，只有第一个实例起作用（第一个实例的意思是，我把哪个部分放在第一位并不重要，其余部分似乎被忽略）。

我还尝试将它们全部包含到一个函数中

$(document).on("scroll ready", function() {
    if ($(this).scrollTop()>=$('#intro').position().top){
        $("#nav .home a").addClass("ur-here");
    }
    else if ($(this).scrollTop()>=$('#services').position().top){
        $("#nav .service a").addClass("ur-here");
    }
    else if ($(this).scrollTop()>=$('#contact').position().top){
        $("#nav .contact a").addClass("ur-here");
    }
    else if ($(this).scrollTop()>=$('#blog').position().top){
        $("#nav .blog a").addClass("ur-here");
    }
});

但再一次，只有第一个实例有效

我也试过换掉

$(document).on("scroll ready", function() {

与

及

除了我使用

$(window).load(function() {

在第二个实例中，代码适用于它和第一个实例，但不管我使用什么，它都会继续忽略它之后的其余部分

请帮忙

---

编辑

如果有帮助的话，这是一个wordpress网站

---

解决

我只是把“#”作为目标

---

如果目标div存在且长度大于0，我可以让导航链接执行操作。

如果您的目标是确保在滚动任一方向时，在用户滚动窗口顶部的最底部元素上显示

ur here

类，则：

---

你能用计算机复制这个吗？除非

.ur here

类的“样式化”只适用于第一个类，否则我很难理解它们是如何相互干扰的。旁注：如果您发现自己在一个函数中重复编写

$（this）.scrollTop（）

，请想想这需要多少工作量，并将结果缓存到一个变量中以供重用。我正在处理的站点不在线，我不知道如何复制多个页面。@Nicholas：这不需要复制多个页面（这不是一个障碍），链接到该站点（而不是将MCVE放在问题中）将脱离主题（链接）。只有一个页面复制了您描述的滚动行为。将事情减少到最小的测试用例是解决问题的基础。@Nicholas：例如，在滚动时成功地添加了类（当然，在向上滚动时您也希望这样做）。。。但我认为您的用例必须略有不同。没错。我个人建议对各个部分进行迭代，而不是逐个硬编码：感谢这个例子，我对其进行了编辑，使其代码与我的项目中的代码完全相同，并且效果很好，但是当我在我的项目中使用它时，只有第一个实例起作用（最下面的div（#blog）是什么.我不需要它来滚动，我只是用它来检测一个特定的div，是否有任何方法来检测一个“#”是否在页面上？

$(window).load(function() {

$(window).load(function() {

if ($("#mydiv").length > 0){

$(document).on("scroll ready", function() {
    // Remember scrollTop
    var scrollTop = $(this).scrollTop();

    // Remove the class from all relevant elements
    $("#nav a").removeClass("ur-here");

    // Working from the BOTTOM up, add it to the first matching element
    if (scrollTop >=$('#blog').position().top) {
        $("#nav .blog a").toggleClass("ur-here");
    }
    else if (scrollTop >=$('#contact').position().top) {
        $("#nav .contact a").addClass("ur-here");
    }
    else {
        // ...and so on
    }
});