javascript - 垂直滚动 Stellar JS 上的水平位置移动

Question

我的水平偏移效果有问题。我只想使用 Stellar JS 在垂直滚动条上水平移动 img。截至目前，我有一个 1800 像素高的容器元素和一个 img ，其高度和宽度在加载时动态设置(基于视口(viewport)......即它的高度是视口(viewport)的高度和宽度按比例比视口(viewport)宽)。

当从容器顶部垂直滚动到容器底部时，我希望 img 从它的左边缘一直向左滑动到它的右边缘。因此，在容器顶部，img会左对齐右溢出，然后在容器底部，img会右对齐并溢出左边。

这是一个由 Stellar JS 创建者创建的示例，它接近什么(但也有一些不需要的垂直滚动)--> link

看看这个模板 jsfiddle:http://jsfiddle.net/z6F3h/2/它需要实现效果。我相信我需要修改... setTop 和 setLeft 属性

Answer 1

stellar.js 插件的创建者为它同时水平和垂直移动奠定了良好的基础。

How to move/animate elements in from the side with Stellar.js on a vertical scroll?

如果您正在寻找仅水平移动而根本不上下移动的层，那么我稍微修改了他的代码，使顶部保持不变。

http://jsfiddle.net/QGd9g/995/

我所做的修改是让 originalTop - newTop，而不是仅仅将 top 设置为新的 Top。

$(function(){
    $.stellar.positionProperty.apple = {
        setTop: function($el, newTop, originalTop) {
            $el.css({
                'top': originalTop - newTop,
                'left': $el.hasClass('apple') ? originalTop - newTop : 0
            });
        }
    };

    $.stellar({
        verticalOffset: 200,
        horizontalScrolling: false,
        positionProperty: 'apple'
    });
});

我所做的事情(可能有更好的解决方案)的棘手之处在于，您设置了 Left，图层将向右移动。