粘性定位：让商城分类滚得漂漂亮亮，so easy

前端

2023-02-17 18:47:58

用 CSS 粘性定位掌控商城分类，畅游滚动洪流

让商城分类在滚动的洪流中脱颖而出

随着电子商务的蓬勃发展，电商平台如何帮助用户在浩如烟海的商品分类中快速找到所需商品已成为亟待解决的难题。传统的固定分类导航栏方式虽方便操作，却占据大量屏幕空间，影响商品展示效果。

CSS 粘性定位技术如同一只灵活的蜘蛛侠，在滚动的页面中穿梭自如，既保证了分类导航栏的可见性，又不占用屏幕空间。当页面滚动时，分类导航栏会牢牢固定在页面顶部，用户可轻松快速地找到所需商品，操作体验极佳。

揭秘 CSS 粘性定位的奥秘

粘性定位，让分类导航栏如同拥有黏性一般，牢牢地锁死在页面顶部，这背后有着不简单的原理：

1. CSS 语法

position: sticky;
top: 0;

position: sticky; 将元素设置为粘性定位
top: 0; 将元素固定在页面顶部

2. 粘性定位的堆积规则

粘性定位的堆积规则与其他定位规则相似，遵循先来后到的原则，最后设置的粘性定位规则优先级最高。

3. 失效问题解决之道

粘性定位并非万能，有时会出现失效问题，比如：

父元素高度不足，导致子元素无法固定在顶部
父元素被隐藏或溢出，导致子元素无法固定在顶部
子元素高度过高，导致无法固定在顶部

解决方法：

增加父元素高度，使子元素能够固定在顶部
显示父元素，并确保没有溢出，使子元素能够固定在顶部
减少子元素高度，使其能够固定在顶部

手把手实现商城分类高亮和滚动吸附

1. HTML 结构

<div class="container">
  <div class="header">
    <ul class="nav">
      <li><a href="#">分类 1</a></li>
      <li><a href="#">分类 2</a></li>
      <li><a href="#">分类 3</a></li>
    </ul>
  </div>
  <div class="content">
    ...
  </div>
</div>

2. CSS 样式

.container {
  position: relative;
}

.header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 99;
}

.nav {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.nav li {
  list-style: none;
  margin-right: 20px;
}

.nav a {
  color: #000;
  text-decoration: none;
}

.nav li:hover a {
  color: #f00;
}

.content {
  padding-top: 80px;
}