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

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元素来指导增加位置的频率，因为每次滚动时它都会有所不同。

我的建议在这里 。 尝试使用整个高度和窗口高度来计算百分比并使用它。 另外，由于滚动持续时间非常长，因此我不会在调整位置时花费太多时间。 不必指出得太小。

仅供参考，我添加了一个transition-duration: 1s; 和transition-property: all; 在您的css中进行了平稳的移动。

百分比编码

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

希望你找到自己的方式！