javascript - 在路径上上下滚动时移动图像

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;
    }

希望你能找到自己的路!