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

Question

当用户向上和向下滚动页面时，我希望从左到右逐渐移动/滑动一个小箭头形状的元素。

例如，如果我向下滚动 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;
}

Answer 1

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

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

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

要使箭头始终可见，您需要使用position:fixed;

演示小提琴