HTML中如何做到这种类型的导航条吸顶效果

HTML中如何实现如图这种类型的吸顶导航条，就是能实现点导航条内容随着移动

img

css position定位

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

js的话结合滚动事件，做一个判断，当滚动到什么值时固定定位导航栏


内容中
<div id="no1">xxx</div>
<div id="no2">yyyy</div>
导航连接
<a href="#no1">学习经历</a>
<a href="#no2">兴趣爱好</a>

加一个粘性定位position: sticky;