Web移动端Fixed布局的解决方案

Web移动端Fixed布局主要是为了在移动端上实现固定定位，使得页面元素固定在页面指定位置不会跟随页面滚动而发生变化。但是，在某些情况下，Fixed布局会给开发和设计带来很大的困扰，如在iOS上Fixed布局时，可能会出现滑动空白区域无法回到原来Fixed定位的位置的问题，这就需要我们在开发时寻找一种更加灵活的解决方案。下面是Web移动端Fixed布局解决方案攻略的细节：

1. 使用transform进行Fixed布局

transform可以引起属性重排，因此它是很灵活的一种Fixed布局方案。代码如下：

.fixed {
    position: fixed;
    z-index: 100;
    height: 100px;
    width: 100px;
    background-color: #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.fixed元素会被Fixed固定在页面上，而translateZ(0)可以使动画流畅，并避免iOS滑动空白区域无法回到原来Fixed定位的位置的问题。

2. 使用position: sticky进行Fixed布局

position: sticky是CSS3新增加的属性，可以实现基于视口和包含块的元素位置是否滚动而定位。位置sticky时，元素处在文档流中，但是它的位置表现得就像position: fixed定位。

.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 100;
    height: 100px;
    width: 100px;
    background-color: #fff;
}

此时，.sticky元素在到达设定位置时就会被固定住，而不再随着页面的滚动而移动。

使用以上两种方法，我们可以绕过一些iOS上的坑，实现Fixed布局。

示例1：使用transform属性进行Fixed布局

<div class="container">
  <div class="fixed">Fixed元素</div>
  <div class="content">
    ...
  </div>
</div>

.container {
  overflow-y: scroll; /* 起到滚动条作用 */
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #333;
  color: white;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.content {
  height: 5000px; /* 长度足够长才能看见滚动效果 */
  padding-top: 40px;
}

示例2：使用position: sticky属性进行Fixed布局

<div class="container"><!--sticky需要包含块，overflow属性并不是决定性因素-->
  <div class="fixed">Fixed元素</div>
  <div class="content">
    ...
  </div>
</div>

.container {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.fixed {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #333;
  color: white;
}

.content {
  margin-top: 40px; 
  height: 5000px; /* 长度足够长才能看见滚动效果 */
}