前端CSS三种实现导航栏吸顶效果

目录

1、sticky : 粘性定位

2、fixed : 固定定位

3、relative + absolute 结合使用

---

参加的七夕创作活动 ， 内容有些无用的自动忽略掉就好 ^_^ ~

创作场景 ：

调研问卷随着创建的题目数量越来越多 ，页面越来越长 ，

等到用户创建完题目之后还要自己翻到顶部去点击发布 ，属实太麻烦 ，

( 当然你也可以自己加一个返回顶部的按钮供用户使用也可以 )

所以为了进一步的优化用户体验 ，要实现一个将操作导航栏进行 “ 吸顶 ” 的一个效果 ，

在这里呢 ， 主要使用了 css 属性的三种定位方式 ： 分别是 ：

1、position：sticky； // 粘性定位 （ 简单实用 ， 但 IE 浏览器不兼容此属性 ）

2、position：fixed； // 固定定位（ 元素会脱离文档流 ，并且会随着浏览器放大缩小而跑偏 ）

3、position：absolute； // 绝对定位 （ 此方法需要结合 relative 相对定位 来使用 ）

小编在项目内将以上三种方法都尝试了一遍 ， 最终选用了最后第三种方法 ，

原因 ：

小编的项目需要兼容 IE 浏览器 ，第一种方法简单易复现 ， 在谷歌浏览器上使用完全没问题 ， 但在 IE 上却不生效 ， 无奈只好换下一个方法了 ；

第二种方法因为使用了固定定位 ，fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。一是会导致元素脱离文档流 ，二是在一般情况下会相对于屏幕视窗（浏览器窗口）来进行定位，所以当你放大缩小浏览器的时候 ，其位置可能会相对原来的位置跑偏，小编在项目里使用就会在浏览器放大产生横向滚动条时跑偏位置。

最后，通过最后一种方法，算是间接模拟实现了一种“ 固定定位 ” 吧 ， 利用其父级的父级来 相对定位 ， 其本身 绝对定位 ， 具体下面细讲 ：

---

七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
参与发布文章即可获得【话题达人】勋章，参与多个话题还可进行勋章升级喔！

你可以从以下几个方面着手（不强制），或者根据自己对话题主题的理解创作，参考如下：

提醒：在发布作品前请把不用的内容删掉

记录一起走过的那些日子

讲述和亲爱的TA一起经历的那些故事

• 那些初见印象
• 那些浪漫的开始
• 那些铭记于心的大小事
• 那些经历的曲折
• 那些经历的幸福与快乐
• 那些珍贵的瞬间
• 那些对未来的期许/计划
  …

创意代码表白

以程序员的方式撒狗粮，专业浪漫，值得拥有！

• 效果演示
• 制作步骤/过程
• 代码文件
  …

提醒：在发布作品前请把不用的内容删掉

---

HTML 代码 ：

  <div class="fufu">
    <div class="fu">
      <header class="zi">导航栏</header>
      <!-- 升华: 阴影效果区域 -->
      <shadow></shadow>
      <main>内容主体</main>
    </div>
  </div>

1、sticky : 粘性定位

      /* 粘性定位 ( IE 浏览器不生效 ) */
      position: sticky; // 粘性定位
      top: 0; // 粘性定位

2、fixed : 固定定位

      /* 固定定位 ( 浏览器放大跑偏 ) */
      position: fixed;
      top: 90px; // 脱离文档流, 不占页面位置
      width: 100%;
      z-index: 999; // 视情况而加

3、relative + absolute 结合使用

// 实现类似于 fixed 固定定位的效果
position: relative; // 父 父相

      // 子 绝对定位
      // 通过给 父父级 .fufu 添加相对定位来实现类似于 fixed 固定定位的效果
      position: absolute;
      top: 0;
      left: 184px;
      width: 100%;
      z-index: 99; // 视项目情况而加

---

完整代码 ：

<template>
  <div class="fufu">
    <div class="fu">
      <header class="zi">导航栏</header>
      <!-- 升华: 阴影效果区域 -->
      <shadow></shadow>
      <main>内容主体</main>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.fufu {
  // 实现类似于 fixed 固定定位的效果
  position: relative; // 父 父相
  .fu {
    .zi {
      // 子 绝对定位
      // 通过给 父父级 .fufu 添加相对定位来实现类似于 fixed 固定定位的效果
      position: absolute;
      top: 0;
      left: 184px;
      width: 100%;
      z-index: 99; // 视项目情况而加

      /* 粘性定位 ( IE 浏览器不生效 ) */
      position: sticky; // 粘性定位
      top: 0; // 粘性定位

      /* 固定定位 ( 浏览器放大跑偏 ) */
      position: fixed;
      top: 90px; // 脱离文档流, 不占页面位置
      width: 100%;
      z-index: 999; // 视情况而加
    }
    main {
      // 解决定位导致脱离文档流的问题
      margin-top: 50px; // 视项目情况而加
    }
    // 阴影效果区域
    /* shadow::before {
      content: '';
      box-shadow: 0 0 10px 1px #333;
      position: ;
    } */
  }
}
</style>

---

升华部分 ：

未完待续。。。