4

我有以下代码：

$(document).ready(function(){
   $(window).scroll(function(){    
      Topo =  $(window).scrollTop();
      ObjScrollASoda.css({
          'marginTop' : (Topo - 800)+'px'
      });
   });
});

（注：ObjScrollASoda 是罐头的 jquery 对象）

这是复制 Trufa 提出的问题的小提琴：http: //jsfiddle.net/VcvJe/1/

在蓝色部分，有一个蓝色的罐子，它会随着页面“滚动”产生类似视差的效果。这是问题所在，因为我只是在用户滚动页面时设置 css，只有在 Chrome（和其他 webkit 浏览器）中才会出现闪烁效果（不需要）。我注意到它并没有在 Firefox 中发生。有谁知道如何避免这种“闪烁”效果？

这是一个视频，可以更好地解释正在发生的事情： http ://www.youtube.com/watch?v=SqDmOx6XY-M

（对不起我的英语不好）

4

2 回答 2

3

我查看了您的YouTube 视频，最好的方法是position:fixed在不移动Azul Can时设置或position:absolute在移动时设置。

也就是说，这个SO Member's Answer.scrollTop();创建了一个简单的插件来使用方法来做到这一点。

同一个SO Question页面也有许多其他有用的答案。

参考： jsFiddle with Azul Can for Chrome

查看没有地址栏中的jsFiddle以访问Edit Page。/show/

于 2012-07-14T10:31:28.207 回答
0

也许我没有完全理解这个问题，但听起来你希望罐子在用户向下滚动页面时保持在原位。我认为您描述的闪烁效果是由于用户滚动时罐子的重新定位引起的。

使用position: fixed是一个可接受的选择吗？请参阅http://jsfiddle.net/VcvJe/8/进行演示。

使用固定位置，元素永远不会重新定位，因此不会出现闪烁。但是，它在 IE<7 中不起作用，因为不支持position: fixed.

于 2012-07-14T08:28:11.843 回答