WZSZF飞鸽传书 如何实现网页悬浮按钮

原文：WZSZF飞鸽传书 如何实现网页悬浮按钮

WZSZF飞鸽传书 如何实现网页悬浮按钮，这里给大家总结一下。

因为代码里注释的很清楚，所以我这里只做一个简单介绍（关于在线客服）。

先说一下我的设计思路，我先考虑它会有几种状态，不改变窗口大小和改变窗口大小的区别，滚动滑动条和不滚动滑动条的区别。

（1）不改变窗口大小并且不滚动滚动条（或者滚动条未超过临界值），是用position:absolute定位在一个固定位置（相对于body），位置定义看自己需求，想要在左边就左边右边就右边。我这里固定在wrapper-inner中间内容的左侧，slide的底部那个位置（crisisHeight临界高度就是根据这个得到的）。所以left值为wrapper-inner左边的距离加上wrapper-inner的宽度，即contentWidth + contentLeft。高度为header的高度加上slide的高度，即contentTop + onlineConnectHeight。

（2）不改变窗口大小并且滚动滚动条（滚动条滚动超过临界值），是用position:fixed定位在一个固定位置（不包括ie6，因为它不支持fixed，下面会有专门讲解），fixed相对于body的（窗口左上角），left值为wrapper-inner左边的距离加上wrapper-inner的宽度，所以为contentWidth + contentLeft。高度为0（自定义的），即一直在窗口顶部。

（3）改变窗口大小并且不滚动滚动条（或者滚动条未超过临界值），这里就是改变一下left值，把位置放在window的右边，所以left值为window的宽度减去left值自身的宽度，即wWidth - onlineWidth。top值不变。

（4）改变窗口大小并且滚动滚动条（滚动条滚动超过临界值），这里就是改变一下left值，把位置放在window的右边，所以left值为window的宽度减去left值自身的宽度，即wWidth - onlineWidth。top值不变。

（5）ie6下面定义就只有一点不一样，没有fixed这个属性。所有top值不一样，它的top值为滚动滚动的高度，即dScrollTop。

hangObj为悬浮对象字面量，可以根据需求添加多个模块，只需在这边添加属性，再调用方法即可，降低了代码重复率（我后期还会继续精简代码量）。

希望这些能给需要的人一丁点帮助，如果有哪里讲的不好或者不对的地方往指正，谢谢