Javascript 当用户上下滚动页面时，使一个小箭头从左向右移动

我希望在用户上下滚动页面时，从左到右递增地移动/滑动一个小箭头形状的元素

例如，如果我向下滚动20px，箭头将向右移动5px 如果我向上滚动40px，箭头向左移动10px

我的站点导航也将使用平滑滚动页面跳转，因此箭头需要响应并定位到导航菜单标题（例如每个导航链接的默认像素位置）

有谁能为这一点提供方向和最佳编码吗

谢谢

.arrow {
enter code here  width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 5px solid #7AC943;
position:relative;
margin-top: -5px;
margin-left: 41px;
position: fixed;
}

.arrow:after {
content:'';
position:absolute;
top:2px;
left:-5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 4px solid black;
}

---

这基本上就是您需要的所有jQuery代码

$(window).scroll(function(){
    $('.arrow').css('margin-left',$(this).scrollTop() / 4 + 'px');
});

绑定到窗口滚动事件并相应更改箭头的位置

要使箭头始终可见，您需要使用

position:fixed

你试过什么了吗？CSS代码？添加一些代码..首先..我已经尝试过了..我刚刚完成了设计，但我现在开始编写代码。我将尝试我所学到的，因为我的经验是非常基本的，但我会给它一个机会，并在未来几天更新我的问题。这是有效的。但现在有几件事是箭头先向左跳，然后按预期向右移动。另外，它向右走得太远，如果我增加像素值，它走得不够远。那么，是否可以在您提供的jquery语法中定义一个固定区域或最大距离，或者使用其他方法使其工作？