Javascript 使用定位标记和isinViewport的动态面包屑

正在为客户端网站创建一个小型jquery插件，这是一个使用锚定标记的简单面包屑系统，它根据当前可见的锚定标记更改面包屑列表中的最后一个元素。此外，我使用HTML5数据元素来存储每个页面名称，这样我就可以将其作为第二个元素添加到面包屑列表中

为了提高可视性，我使用了以下插件：

这是我正在使用的小提琴：

以下是HTML：

<div class="header">head element
    <div id="breadcrumbs" data-page="About">
        <ul>
            <li><a href="#">Home</a></li>
            <li class="currentpage"></li>
            <li class="active"></li>
        </ul>
    </div>
</div>
<div class="spacer"></div>
<div class="gridContainer">
    <div class="space">
        take up some space<br />
        <a class="crumb" id="About" href="#">About Us</a>
    </div>
    <div class="space">
        take up more space<br />
        <a class="crumb" id="Other_heading" href="#">Other heading</a>
    </div>
</div>

预期功能： 当用户向下滚动页面时，当一个带有类“crump”的锚定标记进入Viewport（我在页面下方将其设置为250-350像素）时，我希望带有类“active”的列表项用刚刚触发该功能的锚定标记更新。我不确定我是否正确使用了$（e.target），或者它是否引用了正确的东西

我希望这个函数能够正常工作，然后我需要创建一个实际的演示页面，在填充列表后充实列表的样式。这是另一个问题

---

欢迎您提出任何想法、评论或批评，因为我对jQuery非常陌生，并且正在质疑我在这方面的逻辑。

看起来您想要类似的东西

$.fn.updateCrumbs = function () {
    var currentactive = this.text();
    $(".active").text(currentactive);
}

---

您认为

e

变量指的是什么？哪个事件？scroll事件作为

.scroll（）

回调的参数提供，您需要

e

参数。这甚至没有帮助，因为它的目标始终是您注册事件的

窗口。。。我不知道如何引用触发选择器的特定锚定标记。选择器不会被触发，只有事件会被触发。如果要引用在其上调用
updateCrumbs（）
方法的元素，只需使用
this
。
#breadcrumbs ul {
    list-style: none;
    float: left;
    padding: 2px;
}
#breadcrumbs ul li a {
    text-decoration: none;
    color: black;
}
.space {
    height: 500px;
    background-color: red;
}
.header {
    position: fixed;
    height: 100px;
    background-color: #FFF;
    width: 100%;
    margin-top: 0;
}
.spacer {
    min-height: 100px;
}

$.fn.updateCrumbs = function () {
    var currentactive = this.text();
    $(".active").text(currentactive);
}