小实例：导航栏吸顶效果（原生js和css）详细教程（防秃头小技巧）

第一种原生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>

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

滚动条在最底部，导航栏吸顶：