1

我的水平偏移效果有困难。我只想使用 Stellar JS在垂直滚动上水平移动img 。到目前为止，我有一个 1800px 高的容器元素和一个img，其高度和宽度在加载时动态设置（基于视口......即它的高度是视口的高度，宽度按比例比视口宽）。

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

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

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

4

1 回答 1

2

stellar.js 插件的创建者在这里为使其同时水平和垂直移动打下了良好的基础。

如何在垂直滚动上使用 Stellar.js 从侧面移动/动画元素？

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

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

我所做的事情有什么棘手的（可能有更好的解决方案），就是你 setLeft，图层会向右移动。

于 2014-02-14T21:43:47.107 回答