Question

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

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

以下是由Stellar JS创建者创建的一个示例，该示例接近于（但也有一些不需要的垂直滚动） - ＆gt; 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'
    });
});

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

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

1 个答案: