为什么随着滚动条移动，元素发生抖动？

为什么随着滚动条的移动，元素会不停抖动了？

作为前端工程师，可能有些人有这样的经历，项目需要设计一个相对于显示窗口，位置不变的弹出层 （例如，弹出广告，弹出对话框，弹出登陆注册框等）。

这个时候，我们往往想到了利用“ position : absolute; left : 33px  ; top : 33px ;  ” 这样的一组CSS设置来实现。

但是，当你滚动浏览器的滚动条的时候，你会发现，它的位置相对于显示界面在变化，于是，你想到了用JS来 动态 设置这个弹出层的绝对定位，来达到项目的要求。

例如 ： $( window).scroll (function(){

$("#test").css({top:xxx,left:xxx})

}); 之类的动态绝对定位，你想这回该好了吧！

确实，这回定位是没有问题了，但是出现了新的问题： 动态定位的弹出层随这个滚动条的上下移动，不停的抖动，稍微粗心点的人可能不会注意，但是作为前端，就是要关注细节，关注用户体验。

抖动的原因自然是随着滚动条的移动， “#test” 的位置总是在不断计算，不断的重新定位，就是快速的移动，这个移动的动作太机械，给人的感觉就是抖动了。

那有什么办法解决呢？

其实，很简单，连JS 都不用动。直接设定： #test{position: fixed; left:10%;top:20%; z-index:101 } 

这样就成了，翻看 fixed 的 相关定义： 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

而且这个属性还是跨浏览器的，IE/谷歌/火狐 全部支持它。 可以说是天生就是为弹出层而设计的，没有一丝一毫的抖动。