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

Make a tiny arrow move left to right as user scrolls up and down page

本文关键字：一个 移动 右移 滚动 上下 用户      更新时间：2023-09-26

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

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

演示小提琴

相关文章：