向下和向上滚动路径时移动图像

Question

当我向下或向上滚动时，我在网站上设计了一个球（图像），滚动时球会粘在那条路上。

截图：

但我不知道如何将球粘在路上。

我试过

if (s > 40 && s <= 60) {
            if(scrollPosition == 0){
                position += 2;
            }
            if(scrollPosition == 1){
                position -= 2;
            }
        } else if (s > 60 && s <= 80) {
            if(scrollPosition == 0){
                position -= 2;
            }
            if(scrollPosition == 1){
                position += 2;
            }

但太奇怪..这是我的代码 https://codepen.io/ookangzheng/pen/eEyqjJ?editors=0011

由于

Answer 1

我尝试过几种方法来解决你的问题。首先，我认为很难在编码中使用s元素来指导增加位置的频率，因为每次滚动时它都会有所不同。

我的建议是here。尝试使用整个高度和窗口高度来计算百分比并使用它。此外，由于滚动持续时间非常长，我不会使用那么多点来改变位置。没有必要指出太小。

仅供参考，我已经在您的CSS中添加了transition-duration: 1s;和transition-property: all;，使其顺利进行。

编码百分比

    var s = $(this).scrollTop();
        d = $(document).height(),
        c = $(this).height();
    var length = d - c;
    var pctScrolled = Math.floor(s / length * 100) ;

计算位置

    if( s < 33){
        position = 60;
    }
    if(s > 33 && s < 66){
        position = 40;
    }
    if(s > 66 && s < 100){
        position = 60;
    }
    if(s == 100 || s == 0 ){ //initial the position on top and bottom
         position = 50;
    }

希望你找到自己的方式！