2

我需要在另一个具有溢出：隐藏的 div 中重新定位图像，以获得某种“视差效果”，但这里不能选择使用“位置：固定”，因为固定定位的元素不关心“溢出” :hidden" 父母...所以我需要在 JS (jQuery) 中执行此操作。

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

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

对于我的示例，这是不可能的，因为我稍后需要使用 CMS（Typo3），在那里，不可能将每个 Keyvisual 放置两次（占位符 + 图像） - 这是可能的，但对我的编辑来说非常不舒服.. .

有没有办法绕过这种闪烁？

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

这是脚本的重要部分：

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

1 回答 1

2

似乎没有办法用 position:absolute 做到这一点。问题是，Webkit 和 IE 的引擎在滚动时设置了一个 position:absolute Element 的新 Viewport Position。在计算并设置新位置后，我的 jQuery(window).scroll 会跳入并为 position:absolute Element 设置一个新的/其他位置。因此，如果您按像素滚动（例如 Mac 上的魔术鼠标），那么每次在 jQuery 施展魔法之前，浏览器引擎都会自行设置一个新位置 - 这会导致闪烁！

仅当您将元素设置为 position:fixed 时，浏览器才不会触及它们的位置...

所以我解决这个问题的方法是：在 document.ready 之后，我将我的 Keyvisuals 设置为可见性：隐藏并在 body-tag 之后复制内容。然后，所有这些副本都是位置：固定的，我现在所做的就是根据它们的“隐藏占位符”将高度和顶部值设置为一个 - 就像 Spotify 一样。

于 2013-05-02T08:29:00.827 回答