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

谁借莪１个温暖的怀抱￠ 2022-08-23 13:49 188阅读 0赞

原文：[WZSZF飞鸽传书 如何实现网页悬浮按钮][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为悬浮对象字面量，可以根据需求添加多个模块，只需在这边添加属性，再调用方法即可，降低了代码重复率（我后期还会继续精简代码量）。  
  
希望这些能给需要的人一丁点帮助，如果有哪里讲的不好或者不对的地方往指正，谢谢

[WZSZF_]: http://www.wzszf.com/thread-26119-1-1.html
[WZSZF]: http://www.wzszf.com/