需求如图

上图中，TA评价的酒店区域是滑块，浅蓝色的部分是当窗口上下滚动时，滑块允许滑动的范围。

传统的解决方案

使用position:absolute，并每当窗口resize、scroll时计算滑块的top、left属性。

优点

• 浏览器兼容性好
• 一套代码走天下
• 没有缩放问题

缺点

• 当窗口上下滑动的过程中，滑块会出现“抖动”现象，原因是浏览器需要重排滑块所在位置引起性能消耗。

进阶的解决方案

使用position:fixed，滑动开始时设置滑块的left、top，结束时修改position，并重新定位即可。

从IE7开始，之后的浏览器都支持position:fixed方式，而且这招被广为传唱。

优点

• 滑动过渡平滑，再烂的机器也很少见抖动现象
• 易于定位
• 除IE6以外多数浏览器都支持（Touch浏览器除外）

缺点

• 在一定解析度下看起来很美的网站，由于解析度变化或者窗口的缩放滑块的位置会变得很奇葩。 
  

幕后黑手

之所以会出现如此奇葩的效果，原因是因为fixed定位是从窗口的左上角开始计算，而absolute是从文档的左上角开始计算。所以，在fixed定位时，当窗口的宽度变化或者缩放比变化后，原本设计上下滑动的滑块，在左右方向的偏移量与文档本身的原点不一致，最后引起非预期的效果。

解决方案

简单点说，就是修正滑块的左右偏移量，具体计算方法如下：

1. 先找到一个与滑块的“滑道”相对位置不变的Dom节点，假设为A。
2. 读取leftOffset=A.getBoundingClientRect().left，这个方法实际测试IE7有坑（由于缩放的原因），IE6因为不涉及所以没测试。
3. 然后计算A与滑道之间的X偏移量aOffset。
4. 滑块.styles.left=leftOffset+aOffset;
5. done.

注意：IE7要把缩放因子放到计算中去，才比较准确（不是100%）。

参考：

1.  getBoundingClientRect，这里有一篇非常靠谱的介绍：http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html
2. IE7缩放的计算http://blog.sina.com.cn/s/blog_6bb7b9e90101oy3a.html