我想创建一个 CSS 动画，其中箭头在滚动时沿着 SVG 蛇形路径移动，并在每个新部分上更改图标。
我看了几个例子：
但我无法通过我的页面设计重新创建预期的行为。
到目前为止，这是我的代码：
window.addEventListener('scroll', function() {
let l = Path_440.getTotalLength();
let dasharray = l;
let dashoffset = l;
e = document.documentElement;
theFill.setAttributeNS(null, "stroke-dasharray", l);
theFill.setAttributeNS(null, "stroke-dashoffset", l);
dashoffset = l - window.scrollY * l / (e.scrollHeight - e.clientHeight);
//console.log('window.scrollY', window.scrollY, 'scrollTop', e.scrollTop, 'scrollHeight', e.scrollHeight, 'clientHeight', e.clientHeight, 'dash-offset', dashoffset);
theFill.setAttributeNS(null, "stroke-dashoffset", dashoffset);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="246" height="2990" viewBox="0 0 246 2990" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="Path_440" d="M210.001 1.5C210.001 1.5 41.0015 324.5 …