Question

我有以下代码：

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

（注意：ObjScrollASoda是can的jquery对象）

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

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

这是一段视频，更好地解释了发生了什么： http://www.youtube.com/watch?v=SqDmOx6XY-M

（对不起我的英文）

Answer 1

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

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

同样的 SO问题 页面也有许多其他有用的答案。

参考： jsFiddle with Azul Can for Chrome

在地址栏中查看没有/show/的 jsFiddle ，以访问编辑页面。

Answer 2

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

使用position: fixed是否可以接受？有关演示，请参阅http://jsfiddle.net/VcvJe/8/。

对于固定位置，元素永远不会重新定位，因此没有闪烁。但是，它不适用于IE＆lt; 7，因为不支持position: fixed。

Jquery.css对IE和Webkit（Chrome，Safari）执行不必要的闪烁效果，但Firefox也没问题

2 个答案: