Question

我需要将一个图像重新定位在另一个具有溢出的div中：隐藏，以获得某种＆＃34;视差效果＆＃34;但是它没有选择使用＆＃34;位置：固定＆＃34;在这里，因为固定定位的元素不关心＆＃34;溢出：隐藏＆＃34;父母......所以我需要在JS（jQuery）中这样做。

在Firefox中，一切看起来都不错，但在基于Webkit的浏览器和IE9上，背景图像（狗）闪烁，请看这个jsfiddle示例：http://jsfiddle.net/7J5AM/1/

有没有办法解决这个问题？ Spotify使用相同的效果：https://www.spotify.com/uk/但他们使用2个元素执行此效果，第一个只是Keyvisual-Image的占位符，第二个是固定定位的元素，其中包含实际的图像。

对于我的例子，这是不可能的，因为我之后需要使用CMS（Typo3），它不可能将每个Keyvisual放置两次（占位符+图像） - 这是可能的，但它＆＃39;对我的编辑来说非常不舒服......

有没有办法摆脱这种闪烁？

编辑：使用图像作为背景图像也是不可能的，因为我需要调整图像大小以进行响应式设计......

这是剧本的重要部分：

var win_h = jQuery(window).height();
var scroll_top = jQuery(document).scrollTop();
var kv_pos = jQuery(this).parent().offset();

if(parseFloat(kv_pos.top) < (win_h + scroll_top)) {
    var new_top = (((scroll_top - kv_pos.top + 90) / 100) * 60);
    jQuery(this).css('top',new_top);
}

Answer 1

似乎没有办法用position：absolute来做到这一点。问题是，Webkit和IE的引擎设置了一个位置的新视口位置：滚动时的绝对元素。计算并设置新位置后，我的jQuery（窗口）.scroll跳入并为位置设置新的/其他位置：absolute Element。因此，如果您按每个像素滚动（例如Mac上的Magic Mouse），那么每次jQuery发挥其魔力之前，浏览器引擎都会自行设置一个新位置 - 这会导致闪烁！

仅当您将元素设置为位置时：修复浏览器不会触及其位置...

所以我的方法就是这样：在document.ready之后我将我的Keyvisuals设置为可见性：隐藏并在body标签之后复制内容。然后，所有这些copys都是position：fixed，我现在所做的就是根据他们的“隐藏占位符”将高度和顶部值设置为一个 - 就像Spotify一样。

视差闪烁..位置：固定是没有选择

1 个答案: