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

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

《个人博客地图》

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

一、设计稿，以下图所示

二、需求分析

    页面总体分为五部分：

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

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

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

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

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

三、层叠顺序分析

    因为页面①-⑤会出现覆盖状况，所以，须要提早设定好层叠顺序。z-index属性，针对定位元素（position: relative || absolute || fixed）指定元素的堆叠顺序;

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

四、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>

五、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>

六、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 gradually
			nav.style.height = hasScrollValue + footToInnerTop - 230 + 'px';
		}else{
			//content-header don't disapper && footer don't occur
			nav.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 gradually
			nav.style.height = footToInnerTop - 90 + 'px';//90 = ①的高度60 + ③的上下margin各15
		} else {
			//content-header disapper  && footer don't occur
			nav.style.height = innerHeight - 90 + 'px';
		}
    } else if (hasScrollValue >= documentH - innerHeight) {
			//content-header disapper  && footer occur completely
			nav.style.height = innerHeight - 210 + 'px';//210 = ①的高度60 + ⑤的高度120 + ③的上下margin各15
    }
}