PC端自适应的可交互的经典布局详解

时间：2017年5月8日08:55:22

    作为一名Web前端开发工程师，基本功就是扎实的CSS布局功底，做过整站开发的工程师都知道，第一步不是盲目搭建页面框架，而是对设计稿进行分析和规划。本文以一个通用性较高的实际项目，进行深入分析和探讨。

1、设计稿，如下图所示

2、需求分析

    页面整体分为五部分：

    第一部分，在任何情况下都处于悬浮状态，不随页面滚动，并且一直处于顶层显示；

    第二部分，随页面滚动，会被第一部分覆盖；

    第三部分，随页面滚动，当顶部到达第一部分底部时，处于悬浮状态并不再随页面滚动；

    第四部分，随页面滚动，当顶部到达第一部分底部时，会被第一部分覆盖；

    第五部分，如果 ①-④整体高度+第⑤部分高度 小于等于 浏览器显示区域高度时，③和④部分高度自动 增加 至 ①-⑤整体高度 等于 浏览器显示区域高度；如果 ①-④整体高度+第⑤部分高度 大于 浏览器显示区域高度时，③和④部分高度自动 增加 至 ①-④整体高度 等于 浏览器显示区域高度；

3、层叠顺序分析

    由于页面①-⑤会出现覆盖情况，因此，需要提前设定好层叠顺序。z-index属性，针对定位元素（position: relative || absolute || fixed）指定元素的堆叠顺序;

    层叠顺序设定为：body：0；②③④⑤：1；①：2

4、html元素如下

<div class="body"><header class="header">①header</header><div class="content-header">②content-header</div><div class="content"><div class="content-nav-bar">③content-nav-bar</div><div class="content-body">④content-body</div></div><footer class="footer">⑤footer</footer></div>

5、CSS布局如下

<style type="text/css">*{margin: 0;padding:0;}.body{width: 800px;height: 600px;background: #E3E7E2;padding: 10px;overflow: hidden;}.header{width: 100%;height: 80px;background: #fff;border: 1px solid #f4f4f4;margin-bottom: 3px;text-align: center;line-height: 80px;}.content-header{width: 100%;height: 50px;background: #fff;border: 1px solid #f4f4f4;margin-bottom: 3px;text-align: center;line-height: 50px;}.content{width: 100%;height: 373px;margin-bottom: 5px;font-size: 0px;/*保证子元素为display: inline-block;时，水平方向没有间距*/}.content-nav-bar{font-size: 16px;display: inline-flex;align-items: center;/*定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。*/width: 125px;height: 373px;background: #fff;border: 1px solid #f4f4f4;text-align: center;word-wrap: break-word;}.content-body{font-size: 16px;display: inline-block;/*默认对其方式vertical-align: baseline*/vertical-align: top;/*重置vertical-align: top;保证元素垂直不偏移*/margin-left: 5px;width: 666px;height: 373px;background: #fff;border: 1px solid #f4f4f4;text-align: center;line-height: 373px;}.footer{width: 100%;height: 80px;background: #fff;border: 1px solid #f4f4f4;text-align: center;line-height: 80px;}</style>

6、JavaScript源码如下

    以下实际数据和上面CSS中的数据不同，请以JavaScript中的数据为准，同时每个数据后面都带有注解。数据仅仅作为处理逻辑业务的标尺，可略过。

let hasScrollValue = document.documentElement.scrollTop || document.body.scrollTop;//文档滚动过的高度let nav = $('.content-nav-bar')[0];let innerHeight = window.innerHeight;let documentH = document.documentElement.scrollHeight || document.body.scrollHeight;//文档的高度，包括带滚动条的隐蔽的地方let footH = document.getElementsByClassName("ued_footer")[0].offsetHeight;let footToInnerTop = $('.footer')[0].getBoundingClientRect().top;//footer距离innerHeight顶部的距离window.onscroll = function() {    if (0 <= hasScrollValue && hasScrollValue < 120) {//120 = ②的高度nav.style.position = 'static';if(hasScrollValue + innerHeight >= documentH - footH){//content-header don't disapper && footer occur graduallynav.style.height = hasScrollValue + footToInnerTop - 230 + 'px';}else{//content-header don't disapper && footer don't occurnav.style.height = innerHeight + hasScrollValue - 230 + 'px';//230 = ①的高度60 + ②的高度120 + ③的上下margin各25}} else if (120 <= hasScrollValue && hasScrollValue < documentH - innerHeight) {nav.style.position = 'fixed';nav.style.top = 75 + 'px';//③ 距离innerHeight顶部的距离if (hasScrollValue + innerHeight >= documentH - footH) {//content-header disapper  && footer occur graduallynav.style.height = footToInnerTop - 90 + 'px';//90 = ①的高度60 + ③的上下margin各15} else {//content-header disapper  && footer don't occurnav.style.height = innerHeight - 90 + 'px';}    } else if (hasScrollValue >= documentH - innerHeight) {//content-header disapper  && footer occur completelynav.style.height = innerHeight - 210 + 'px';//210 = ①的高度60 + ⑤的高度120 + ③的上下margin各15    }}

7、分析