Javascript 脚本在后续模态中不起作用

我得到了一个脚本的帮助，该脚本在第一个模态中工作，但在接下来的两个模态中都没有。向下滚动时，第一个模式中的背景颜色会发生变化，但第二个模式中不会发生任何变化，以此类推

规格说明独特

表示ID必须是文档范围内唯一的

说了同样的话，但换言之。它说ID在其主子树中必须是唯一的，如果我们阅读它的定义，它基本上就是文档

首先，为了获得最佳实践，您必须更改重复的id

锚定点（在我的示例中，我将其更改为类），并且id
的一个
应该是唯一的

其次，您必须在滚动函数中使用

$（this）

来检测当前的滚动

remodal

，并选择属于它的元素

HTML:

<a class="project-link" href="#modal1" id="one" style="margin-right:25px;">Modurra Shelving </a> 
<div class="remodal" data-remodal-id="modal1">
    
    <div class="dar">Darrien Tu.</div>
    <button class="remodal-close" data-remodal-action="close"></button>
    <div class="anchor-point">sdfsfs</div>
    <div class="title">
        <p class="projectTitle">Modurra
            <br>Shelving.</p>
    </div>
        
        
</div> <a class="project-link" href="#modal2" id="one" style="margin-right:25px;">Other stuff </a> 
    
<div class="remodal" data-remodal-id="modal2">
    <div class="dar">Darrien Tu.</div>
    <button class="remodal-close" data-remodal-action="close"></button>
    <div class="anchor-point">sdfsfs</div>
    <div class="title">
        <p class="projectTitle">Modurra
            <br>Shelving.</p>
    </div>
</div>

var scrollFn = function () {
    var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
    console.log('Scrolling...');
    
    if ($(this).scrollTop() > targetOffset) {
        $(this).find(".projectTitle").addClass("topper");

    } else {
        $(this).find(".projectTitle").removeClass("topper");
    }
};

$('.remodal').scroll(scrollFn);

---

希望这能有所帮助，请查看

您必须使用唯一的

id

检查

定位点。
var scrollFn = function () {
    var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
    console.log('Scrolling...');
    
    if ($(this).scrollTop() > targetOffset) {
        $(this).find(".projectTitle").addClass("topper");

    } else {
        $(this).find(".projectTitle").removeClass("topper");
    }
};

$('.remodal').scroll(scrollFn);