详解CSS粘性定位 sticky

什么是粘性定位 sticky

粘性定位(sticky)是CSS定位(position)属性的一种值。

和相对定位(relative)、绝对定位(absolute)、固定定位(fixed)不同，粘性定位是一种比较特殊的定位方式，它介于相对定位和固定定位之间，可以理解为“相对于父容器定位，但是在滚动到预定位置时会固定在窗口中不滚动”。

粘性定位的应用场景

在Web设计中，粘性定位通常用于实现一些常见的UI交互效果，例如固定的页面导航菜单，常驻的页面标题，以及有一定长度的数据列表。

如何使用粘性定位

在CSS中，使用粘性定位只需要将元素的position属性设置为sticky即可。

.sticky-element {
  position: sticky;
  top: 0px;
}

在这个例子中，.sticky-element就成为了一个粘性定位的元素，top属性用于设置元素在距离顶部0像素的位置即会固定在窗口中不滑动。

粘性定位示例

1.固定导航菜单

下面以一个固定独立的导航菜单为例来演示粘性定位的使用。

首先，我们需要编写HTML结构，使用nav元素包裹一个带有菜单的列表：

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

接着，为nav添加CSS样式，使其成为一个固定的导航菜单：

nav {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.25);
  padding: 20px 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav li {
  margin: 0 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

这个例子中，我们将nav元素的position属性设置为sticky，并设置top为0，这样就能使导航菜单紧贴着顶部，滚动到一定高度后就会固定在窗口中。

2.滚动到一定位置显示元素

下面以一个显示返回顶部按钮为例来演示粘性定位的使用。

首先，我们需要编写HTML结构，在网页底部添加一个返回顶部按钮：

<button class="back-to-top">返回顶部</button>

接着，为.back-to-top添加CSS样式，将其隐藏起来：

.back-to-top {
  position: fixed;
  bottom: -100px;
  right: 20px;
  transition: transform 0.3s ease-in-out;
}

.back-to-top:hover {
  transform: translateY(-10px);
}

这个例子中，我们将.back-to-top元素的position属性设置为fixed，并设置bottom为负值，这样就能将其隐藏在窗口下方。

接下来，使用JavaScript监听浏览器的滚动事件，当滚动高度大于等于500像素时，显示返回顶部按钮：

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollTop >= 500) {
    document.querySelector('.back-to-top').style.bottom = '20px';
  } else {
    document.querySelector('.back-to-top').style.bottom = '-100px';
  }
});

这个例子中，用window.pageYOffset和document.documentElement.scrollTop两种方式获取浏览器滚动高度，当滚动高度大于等于500像素时，将.back-to-top的bottom属性设置为20像素，显示返回顶部按钮。当滚动高度小于500像素时，将.back-to-top的bottom属性设置为-100像素，隐藏返回顶部按钮。

粘性定位的兼容性

粘性定位可以在现代浏览器中得到广泛支持，并且在移动设备上也能得到很好的体验。不过，在IE和Edge浏览器中，粘性定位需要添加-webkit-sticky前缀才能正常工作。