优雅快速的实现吸顶栏导航栏效果

开篇

相信各位童鞋都遇到过产品提出的吸顶导航需求吧，简单来说，就是导航栏会随着页面滚动，而当导航栏滚动到页面顶部时则会固定在顶部位置。需求很简单对吧，实现方法也有很多种，而今天给大家看一个很有‘逼格’且能快速实现的方法。在这之前，我们先来看一下普遍的做法是怎么实现的。

Old Method

之前我们实现这个需求的方法有fixed、flex布局等，我们先看一下传统的fixed定位实现方法吧。

Fixed定位实现

简单来说，就是给需要吸顶的元素添加position: fixed属性，然后给其定位到顶部，具体代码如下：

HTML:

<div class="wrap">
  <div class="fixedTop">我是吸顶</div>
  <div class="content">我是正文</div>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
}
.wrap .fixedTop {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: skyblue;
  color: #fff;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.content {
  width: 100%;
  height: 700px;
  text-align: center;
  background: pink;
  color: #fff;
}

页面效果

问题

相信有的同学已经发现问题了，为啥content元素内的文本不见了呢？？？

原因是position: fixed属性的元素，会脱离文档流，正常的文档流中没有了定位元素的位置，那么他的兄弟元素，也就是demo中的content元素会向上占据了fixedTop元素的位置，而体现在页面中，就是定位元素，遮盖住了同级的兄弟元素，而遮盖的大小取决于定位元素的大小。

那么测试同学肯定会不同意了，我导航栏下一般不是轮播就是正文，你给我挡住了怎么能行呢？没问题，一行代码就解决啦！

优化Fixed定位

我们的解决思路就是，在被遮挡的元素上，添加 padding-top 属性，其值是定位元素的高度。 padding-top: 60px ，这样就解决问题啦！

优化效果

Fiexed定位总结

通过上面的介绍，可以看出使用fixed定位实现吸顶导航栏，不仅要在定位元素上设置属性，还需要在同级的兄弟元素上添加padding值，防止吸顶元素遮盖到正常的页面元素。虽然实现的效果也很不错，但是还是比较繁琐的。那么有没有更优雅，更简单的方法实现呢？

New Method

下面我们来看一个相比fixed定位，更有‘逼格’的实现方案吧。

Sticky定位实现

position: sticky是css定位新增的属性，也称为粘性定位。

粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。也就是说sticky会让元素在页面滚动时如同在正常流中（relative定位效果），但当滚动到特定位置时就会固定在屏幕上如同 fixed ，这个特定位置就是指定的top, right, bottom 或 left 四个阈值其中之一。

拿上面的demo做个改造，具体代码如下:

HTML:

<div class="wrap">
  <div class="fixedTop">我是吸顶</div>
  <div class="content">我是正文</div>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
}
.wrap .fixedTop {
  width: 100%;
  position: sticky;
  top: 0;
  background: skyblue;
  color: #fff;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.content {
  width: 100%;
  height: 1000px;
  text-align: center;
  background: pink;
  color: #fff;
}

页面效果

Sticky注意事项

通过上面的代码和效果，我们能看的出来，position: sticky属性能够用相对较少的代码，实现position: fixed吸顶导航栏效果。但是需要注意的是，sticky属性还是有以下几个坑的。

兼容性

作为一个新的CSS3属性，各大内核对其的支持情况如下图:

可以看出，再各大浏览器上，兼容情况还是不错的，但是在Android系统中，不是特别理想，所以移动端的项目，还是尽量不要使用sticky定位了。

定位值

和其他较于其他的定位属性一样，sticky在使用的时候，也需要给出定位位置属性，但是区别在于，sticky只用top、right、bottom、left中的任何一个就可以。如果不设置，则只会处于相对定位。

局限性

大家都知道,fixed定位是相对于整个页面生效的，而sticky定位只是相对于其父元素定位。同时，父元素必须是可见的，并且父元素没有设置overflow: hidden属性。

结语

以上就是本人关于position: sticky的一点理解了，到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。