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;

<强> Demo fiddle

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

1 个答案: