文章顶部导航栏随页面滚动闪动

导航栏定位

---

前言

提示：本篇文章主要是花一点时间研究一下导航栏定位应该怎么办

---

一、导航栏是什么

导航栏就是我浏览网页或app页面内容时，一般在页面功能模块的顶部，或者侧边来提示用户基本功能列表的区域。（自己总结的）

二、样例代码

下面列举几个常用的处理导航定位的方法，以顶部导航为例
1、使用fixed固定和padding-top控制页面导航和显示内容，但是由于使用固定定位，导航栏已经脱离文档流所以不占用页面大小，内容区域上移顶部。使用padding可以解决。
举例：

<header>
    <ul>
      <li>title1</li>
      <li>title2</li>
      <li>title3</li>
    </ul>
</header>
<section>content1</section>
<section>content2</section>
<section>content3</section>
<section>content4</section>
<section>content5</section>
<section>content6</section>
<section>content7</section>

body {
  padding-top: 40px;
}
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

2、以上问题可以解决内容和导航栏重叠的问题，但是总感觉不优雅，如果导航栏高度并不固定，所以padding还是不合适。那么解决方法就是，用js动态获取hearder高度并监听页面滚动设置relation和fixed混合使用。

const nav = document.getElementsByTagName('header')[0]
const navHeight = nav.offsetHeight
window.onscroll = () => {
  const t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t >= navHeight - 10) {//-10是为了有更好的切换效果，可以根据实际需求调整
    nav.style.position = "fixed";
  } else {
    nav.style.position = "relative";
  }
}

3、用js解决感觉还是不是很优雅，能明显看到position切换时的闪烁可以用css过渡解决，如果想要优雅的解决那就可以用sticky属性值。不需要过渡动画，也不需要动态获取导航栏高度。

//只需一个改动
position: sticky;

解释：元素根据正常文档流进行定位，然后相对它的最近滚动祖先和 containing ，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

三、差异性，兼容性问题

我看了csdn和掘金的解决方法，都是采用relative和fixed配合使用的解决方式，这么做也是考虑的到了sticky的兼容性问题。但是兼容性也并非很差，具体使用的话可以查看caniuse如果对你没影响的话，完全可以时用sticky

总结

文章总结不易，如有问题欢迎指出，互相学习。感谢