你可能不知道的sticky布局？

前言

在开发移动端h5应用时，经常会有固定在顶部以及底部的布局要求。听到固定布局，第一反应就是fixed布局，但是这种布局方式在iOS系统中是有缺陷的，会造成样式混乱，那有没有一种不用fixed就能实现的方法呢？

实现

要想实现这种布局，首先要知道固定区和滚动区。这两个区域都固定在相应位置，将需要的内容都放在滚动区，在滚动区内滚动，而不是滚动整个页面。

以下介绍2种可以实现的方法：

• absolute布局
• flex布局

固定在顶部

核心代码：

<div class="sticky-wrapper">
    <div class="sticky-top">顶部</div>
    <div class="sticky-main">
      <p v-for="i in 30" :key="i">内容</p>
    </div>
</div>
      

第一种：使用position: absolute;布局

.sticky-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  
  width: 100%;
  height: 100vh;

  overflow: hidden;
  z-index: -1;
}

.sticky-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 50px;
  background: red;
}

.sticky-main {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 50px);

  overflow-y: scroll;
}

第二种：使用flex布局

*{
    margin: 0;
    padding: 0;
}
.sticky-wrapper {
  display: flex;
  flex-direction: column;

  height: 100vh;
}

.sticky-top {
  height: 50px;
  background: red;
}

.sticky-main {
  flex: 1;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

固定在底部

核心代码：

<div class="sticky-wrapper">
    <div class="sticky-main">
      <p v-for="i in 30" :key="i">内容</p>
    </div>
    <div class="sticky-bottom">底部</div>
</div>
      

第一种：使用position: absolute;布局

.sticky-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  
  width: 100%;
  height: 100vh;

  overflow: hidden;
  z-index: -1;
}

.sticky-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 50px;
  background: red;
}

.sticky-main {
  position: absolute;
  top: 0;
  bottom: 50px;
  width: 100%;
  height: calc(100vh - 50px);

  overflow-y: scroll;
}

第二种：使用flex布局

*{
    margin: 0;
    padding: 0;
}
.sticky-wrapper {
  display: flex;
  flex-direction: column;

  height: 100vh;
}

.sticky-bottom {
  height: 50px;
  background: red;
}

.sticky-main {
  flex: 1;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

顶部、底部都有固定

核心代码：

<div class="sticky-wrapper">
    <div class="sticky-top">顶部</div>
    <div class="sticky-main">
      <p v-for="i in 30" :key="i">内容</p>
    </div>
    <div class="sticky-bottom">底部</div>
</div>
      

第一种：使用position: absolute;布局

.sticky-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  
  width: 100%;
  height: 100vh;

  overflow: hidden;
  z-index: -1;
}

.sticky-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 50px;
  background: red;
}

.sticky-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 50px;
  background: red;
}

.sticky-main {
  position: absolute;
  top: 0;
  bottom: 50px;
  width: 100%;
  height: calc(100vh - 50px - 50px);

  overflow-y: scroll;
}

第二种：使用flex布局

*{
    margin: 0;
    padding: 0;
}
.sticky-wrapper {
  display: flex;
  flex-direction: column;

  height: 100vh;
}

.sticky-top {
  height: 50px;
  background: red;
}

.sticky-bottom {
  height: 50px;
  background: red;
}

.sticky-main {
  flex: 1;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

小结

以上2种方法在移动端中的兼容性还是OK的，可以放心使用。