临沂软件开发介绍自浮动/固定框实现算法

文章来源：临沂软件开发添加时间：2016-12-23 11:42:54 浏览人数：

临沂软件开发在页面设计时，丰富的页面内容会让页面在浏览时出现一条长长的滚动条，而在这个烦躁的互联网年代，焦躁不安的用户往往会因为长长的滚动条而无法耐心浏览全部内容，此时页面设计重点就要有所彰显，而浮动框则是页面设计师们经常会用到的布局手段，临沂软件开发详细介绍了一种自浮动/固定框实现算法，文章图文并茂、简单易懂，你一定不能错过哦。
临沂软件开发需要实现的页面效果

如上图所示页面效果，第一、当因为页面内容高度大于浏览器显示框的实际高度导致需要突出显示的浮动框不在浏览器显示框内显示时，无论页面如何滚动，浮动框始终停靠浏览器底部上方指定位置显示；
第二、当缩放浏览器高度时，浮动框始终停靠浏览器底部上方指定位置浮动显示；
第三、当页面滚动至指定位置时，浮动框在该位置由浮动显示变成在页面中固定显示或者由固定显示变成停靠浏览器底部上方指定位置显示。
临沂软件开发关于问题的分析
采用的元素定位方案：getBoundingClientRect() 来获取页面元素的位置，

方案一（淘汰）：临沂软件开发使用div实现浮动框，选取页面底部的指定元素作为控制浮动框固定或者浮动的判断参考位置；

方案二（采用）：临沂软件开发使用DIV实现两个形状完全相同的突出显示框，其中一个始终停靠浏览器底部浮动（浮动框），另一个始终在页面指定位置显示（固定框），通过固定框在浏览器显示框内刚好可以显示和刚好被覆盖的临界点来控制浮动框的显示，实现浮动框的自浮动和自固定的页面效果。

方案小结：对两个方案进行了实际的测试，方案一在固定或浮动的临界位置点附近会有闪烁和不稳定的情况；方案二完美的实现了临沂软件开发想要的效果，不过在设计时，如果设置的浮动框停靠的位置与浏览器底部过大时在浮动和固定效果切换时就会出现不是很完美的过度效果，不过这个可以通过算法来弥补，在此就不多说了。
临沂软件开发技术实现
1、构建两个完全相同的DIV框
固定框DIV：元素的样式position:relative
浮动框DIV：元素的样式position:fixed