Javascript 带有透明标记的时间线

我试图弄清楚是否有可能创建一个带有动态放置的透明标记的时间线（或者更具体地说，在我的例子中是一个滚动指示器），它可以让你看到它后面的背景图像，但也可以隐藏/屏蔽它所在的时间线。 让我给你看一张我试图实现的屏幕截图，以便澄清：

因此，我有一个时间轴，当用户滚动页面时，它会逐渐填充，我希望动态地向时间轴添加标记，以指示“兴趣点”。到目前为止，这应该是相对容易的，但是。。。例如，这些标记应该模糊/遮罩/剪裁时间线本身（这样你就看不到标记后面的线），同时保持透明，这样你就可以看到它后面的图像

使用html、css、js/jquery和/或svg的组合是否可以实现这一点

我见过很多例子，其中标记有一个纯色背景，与其父元素的背景色相同，以产生透明的错觉，但我从来没有见过真正透明的标记

我非常感谢你们的一些见解，因为我现在很困惑

我目前掌握的一些代码，以防万一：

js:

html:

---

这确实是可能的

用户滚动过标记后，您要做的是将

.progress-bar\uuu timeline-marker

替换为填充/活动图像。这可以在JS中完成

为了使完全透明的标记隐藏红线，您需要使用。您需要两个图像：第一个图像将是一个圆形遮罩，隐藏穿过标记的红线，第二个图像将是实际的活动标记

z索引：线<隐藏线的圆形遮罩<透明标记

---

这在纯HTML/CSS中是不可能的。

这确实是可能的

用户滚动过标记后，您要做的是将

.progress-bar\uuu timeline-marker

替换为填充/活动图像。这可以在JS中完成

为了使完全透明的标记隐藏红线，您需要使用。您需要两个图像：第一个图像将是一个圆形遮罩，隐藏穿过标记的红线，第二个图像将是实际的活动标记

z索引：线<隐藏线的圆形遮罩<透明标记

---

这在纯HTML/CSS中是不可能的。

有太多的方法来构建这样的东西。你需要做的是选择一个并尝试它。你能为我命名/解释一个吗？简单的HTML和CSS就足够了。试着自己做这个，然后在你写了一些代码后来这里寻求帮助。我很确定你不能用简单的HTML和CSS来实现这一点。我已经有了一些滚动指示器和时间线的代码，只是透明标记的问题。如果你能为我指出正确的方向，我会非常感激你一直说你“有一些代码”，但我没有看到任何代码。解决和理解问题也是如此，而不是免费获得完整的解决方案。你不能指望别人做你不做的工作。有太多的方法来构建这样的东西。你需要做的是选择一个并尝试它。你能为我命名/解释一个吗？简单的HTML和CSS就足够了。试着自己做这个，然后在你写了一些代码后来这里寻求帮助。我很确定你不能用简单的HTML和CSS来实现这一点。我已经有了一些滚动指示器和时间线的代码，只是透明标记的问题。如果你能为我指出正确的方向，我会非常感激你一直说你“有一些代码”，但我没有看到任何代码。解决和理解问题也是如此，而不是免费获得完整的解决方案。你不能指望别人做你不做的工作。

 $( document ).ready(function() {

        var $progressContElement = $("<div id='progress-cont' class='scroll-indicator-wrap'><div id='progress-bar__timeline' class='progress-bar__timeline'></div></div>");

        // Create the progress bar itself
        var $progressBarElement = $("<div id='progress-bar' class='scroll-indicator progress-bar__timeline'></div>");
        $progressBarElement.css("height", "0%");

        $progressContElement.append($progressBarElement);

        var $locationObject = $("#wrapper-main");
        $locationObject.prepend($progressContElement);

        var poi = $(".scroll-indicator__POI");
        var poiLength = $(".scroll-indicator__POI").length;
        var pracPoiLength = poiLength - 1;
        console.log(poiLength);
        $(poi).each(function(i) {
            console.log(i);
            $progressContElement.append("<div class='progress-bar__timeline-marker'></div>");
            var markerOffset = parseInt((i / pracPoiLength) * 100);
            $(".progress-bar__timeline-marker:eq("+i+")").addClass("test").css("top", markerOffset+"%");
        });

        // Event handler that updates the width of the progress bar based
        // on how far the contentToTrack elemt has been scrolled
        $(window).scroll(function(e){
            var pageHeight = $(window).height();
            var $container = $("#wrapper-main");

            // Adjusted height
            var adjustedHeight = $container.innerHeight() - pageHeight;
            var progress = (($(window).scrollTop() / adjustedHeight) * 100);
            $progressBarElement.css("height", progress + "%");
        });

});

 .scroll-indicator__POI {
    height: 100vh;
    background-color: #e7ffdf;
    border-bottom: 1px solid #ccc;
}

.scroll-indicator-wrap {
    position: fixed;
    z-index: 3;
    right: 0;
    height: 100%;
    width: 20px;
}

.progress-bar__timeline {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    background-color: #000;
}

#progress-bar__timeline {
    height: 100%;
}

.scroll-indicator {
    background-color: red;
}

.progress-bar__timeline-marker {
    position: absolute;
    left: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid #000;
}

<div id="wrapper-main">
    <div class="scroll-indicator__POI" style="background-image:url('https://placeimg.com/640/480/any')"></div>
    <div class="scroll-indicator__POI" style="background-image:url('https://placeimg.com/750/480/any')"></div>
    <div class="scroll-indicator__POI" style="background-image:url('https://placeimg.com/640/500/any')"></div>
   <div class="scroll-indicator__POI"></div>
</div>