我的水平偏移效果有问题。我只想使用 Stellar JS 在垂直滚动条上水平移动 img。截至目前,我有一个 1800 像素高的容器元素和一个 img ,其高度和宽度在加载时动态设置(基于视口(viewport)......即它的高度是视口(viewport)的高度和宽度按比例比视口(viewport)宽)。
当从容器顶部垂直滚动到容器底部时,我希望 img 从它的左边缘一直向左滑动到它的右边缘。因此,在容器顶部,img会左对齐右溢出,然后在容器底部,img会右对齐并溢出左边。
这是一个由 Stellar JS 创建者创建的示例,它接近什么(但也有一些不需要的垂直滚动)--> link
看看这个模板 jsfiddle:http://jsfiddle.net/z6F3h/2/它需要实现效果。我相信我需要修改... setTop
和 setLeft
属性
最佳答案
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,图层将向右移动。
关于javascript - 垂直滚动 Stellar JS 上的水平位置移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19324434/