第一种原生js写法

<style> * { margin: 0; padding: 0; } </style> <div> <div style="height: 100px;"></div> <div id="nav" style="background: red;height: 30px;box-sizing: border-box; top:0;z-index:9999;width: 100%;"> </div> <div style="background: skyblue;height: 500px;box-sizing: border-box;"></div> <div style="background: yellowgreen;height: 800px;box-sizing: border-box;"></div> </div> <script> let mynav = document.getElementById('nav') window.onscroll = () => { if (document.documentElement.scrollTop > mynav.offsetTop) { mynav.style.position = "fixed"; } else { mynav.style.position = "static"; } }; </script>

第二种css简单写法（浏览器兼容）

<style> * { margin: 0; padding: 0; } #nav { position: -webkit-sticky; position: sticky; top: 0; } </style> <div> <div style="height: 100px;"></div> <div id="nav" style="background: red;height: 30px;box-sizing: border-box; top:0;z-index:9999;width: 100%;"> </div> <div style="background: skyblue;height: 500px;box-sizing: border-box;"></div> <div style="background: yellowgreen;height: 800px;box-sizing: border-box;"></div> </div>

效果如下： 初始页面（滚动条在最上方）： 滚动条移动在中间，此时导航栏已经吸顶： 滚动条在最底部，导航栏吸顶：