HTML + CSS 连载 | 56 - 粘性定位-CSDN博客

本文链接：https://blog.csdn.net/JingnanJia/article/details/136460347

html+css.jpeg

一、粘性定位

除了前面提到的相对定位、绝对定位和固定定位外，还有一个定位就是粘性定位，给元素设置 position: sticky 即可实现粘性定位。可以使用 left、right、top、bottom四个属性调整位置，不过最常用的是 top 属性。

粘性定位比其他三个定位方式要新一些；sticky 属性可以说是一个前端开发者期待已久的属性，可以把 sticky 看做是相对定位和固定(绝对)定位的结合体；它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点；当达到这个阈值点时, 就会变成固定(绝对)定位。

粘性定位的参照对象是离它最近的一个拥有滚动机制的祖先元素，即便整个祖先不是最近的真实的滚动祖先。

粘性定位的使用场景非常广泛，使用粘性定位的需求大概是这样的：像某电商网站的标题一样一开始是不固定，往下滚到到表头快要消失的时候再固定。

以前的做法是通过监听滚动事件，当滚动到一定长度时，获取当前元素并且改变定位方式，即从 relative 改成 fixed，这样非常麻烦。

现在我们就可以使用粘性定位来实现这一需求。

首先创建一个 HTML 页面，该页面要包含滚动条，具体 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>我是标题</h1>
  <div class="nav">
    <span>电脑</span>
    <span>手机</span>
    <span>衣服</span>
    <span>鞋子</span>
  </div>
  <ul>
    <li>电脑列表1</li>
    <li>电脑列表2</li>
    <li>电脑列表3</li>
    <li>电脑列表4</li>
    <li>电脑列表5</li>
    <li>电脑列表6</li>
    <li>电脑列表7</li>
    <li>电脑列表8</li>
    <li>电脑列表9</li>
    <li>电脑列表10</li>
    <li>电脑列表11</li>
    <li>电脑列表12</li>
    <li>电脑列表13</li>
    <li>电脑列表14</li>
    <li>电脑列表15</li>
    <li>电脑列表16</li>
    <li>电脑列表17</li>
    <li>电脑列表18</li>
    <li>电脑列表19</li>
    <li>电脑列表20</li>
    <li>电脑列表21</li>
    <li>电脑列表22</li>
    <li>电脑列表23</li>
    <li>电脑列表24</li>
    <li>电脑列表25</li>
    <li>电脑列表26</li>
    <li>电脑列表27</li>
    <li>电脑列表28</li>
    <li>电脑列表29</li>
    <li>电脑列表30</li>
    <li>电脑列表31</li>
    <li>电脑列表32</li>
    <li>电脑列表33</li>
    <li>电脑列表34</li>
    <li>电脑列表35</li>
    <li>电脑列表36</li>
    <li>电脑列表37</li>
    <li>电脑列表38</li>
    <li>电脑列表39</li>
    <li>电脑列表40</li>
    <li>电脑列表41</li>
    <li>电脑列表42</li>
    <li>电脑列表43</li>
    <li>电脑列表44</li>
    <li>电脑列表45</li>
    <li>电脑列表46</li>
    <li>电脑列表47</li>
    <li>电脑列表48</li>
    <li>电脑列表49</li>
    <li>电脑列表50</li>
    <li>电脑列表51</li>
    <li>电脑列表52</li>
    <li>电脑列表53</li>
    <li>电脑列表54</li>
    <li>电脑列表55</li>
    <li>电脑列表56</li>
    <li>电脑列表57</li>
    <li>电脑列表58</li>
    <li>电脑列表59</li>
    <li>电脑列表60</li>
    <li>电脑列表61</li>
    <li>电脑列表62</li>
    <li>电脑列表63</li>
    <li>电脑列表64</li>
    <li>电脑列表65</li>
    <li>电脑列表66</li>
    <li>电脑列表67</li>
    <li>电脑列表68</li>
    <li>电脑列表69</li>
    <li>电脑列表70</li>
    <li>电脑列表71</li>
    <li>电脑列表72</li>
    <li>电脑列表73</li>
    <li>电脑列表74</li>
    <li>电脑列表75</li>
    <li>电脑列表76</li>
    <li>电脑列表77</li>
    <li>电脑列表78</li>
    <li>电脑列表79</li>
    <li>电脑列表80</li>
    <li>电脑列表81</li>
    <li>电脑列表82</li>
    <li>电脑列表83</li>
    <li>电脑列表84</li>
    <li>电脑列表85</li>
    <li>电脑列表86</li>
    <li>电脑列表87</li>
    <li>电脑列表88</li>
    <li>电脑列表89</li>
    <li>电脑列表90</li>
    <li>电脑列表91</li>
    <li>电脑列表92</li>
    <li>电脑列表93</li>
    <li>电脑列表94</li>
    <li>电脑列表95</li>
    <li>电脑列表96</li>
    <li>电脑列表97</li>
    <li>电脑列表98</li>
    <li>电脑列表99</li>
    <li>电脑列表100</li>
  </ul>
</body>
</html>

在浏览器中打开页面，具体效果如下：

我们可以通过固定定位来固定表头，设置如下 CSS 代码：

    .nav {
      background-color: #f00;
      color: #fff;

      position: fixed;
      top: 0;
      right: 0;
      left: 0;
    }

刷新浏览器，效果如下：

可以看到表头被固定在视口顶端的位置，想要实现表头一开始不固定，滚到到表头快要消失的时候在固定的效果可以通过设置 sticky 定位，具体代码如下所示：

.nav {
  background-color: #f00;
  color: #fff;

  /* position: fixed;
  top: 0;
  right: 0;
  left: 0; */
  position: sticky;
  /*距离顶端多少时固定*/
  top: 0;
}

刷新浏览器，最开始效果是这样的：

往下滑动滚动条，表头会固定在顶部：

一开始导航栏会随着页面滚动，当导航栏到达页面顶端时会固定在那里，这就是固定定位和相对定位结合的效果。

粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
常用top值，表示在距离顶端多少px时固定
粘性定位和浮动可以同时设置，但不推荐。
粘性定位的元素，也能通过margin调整位置，但不推荐。

粘性定位和相对行为的特点基本一致，不同的是粘性定位可以在元素到达某个位置时将其固定。

position 值的对比

定位方式	脱离标准流	定位元素	绝对定位元素	定位参照对象
static - 静态定位	否	否	否	无
relative - 相对定位	否	是	否	元素自己设置定位之前的位置
absolute - 绝对定位	是	是	是	最临近的祖先定位元素，如果找不到这样的祖先定位元素，参照对象为视口
fixed - 固定定位	是	是	是	视口