在我们的网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面土嘎嘎官网的头部导航会碎屏滚动

如果想实现这个效果 一般情况下，使用JS监听滚动事件动态添加类名就可以实现，不过经过一番尝试，发现这种效果仅仅使用CSS也能轻易实现，下面是css随屏滚动,css跟随页面滚动,css 随屏幕滚动条滑动效果。

接下来土嘎嘎小编 教大家实现  头部固定定位

假设有这样一个布局

<header>土嘎嘎</header>

<main>这里是正文内容文本很多P在里面</main>

简单修饰一下

header {

    background: #fff;

    font-size: 20px;

    padding: 10px;

}

头部固定定位有很多种方式，比较常见的是使用 fixed 定位

header {

    position: fixed;

    top: 0;

但是，fixed 定位是不占空间的，会导致遮挡内容区域，所以一般还需要预留头部一部分空间出来，比如这样

main {

margin-top: 头部的高度

}

在这里，我更推荐使用 sticky 定位，在吸顶的同时，还能保留原有的占位

header {

position: sticky;

top: 0

}

快去实现效果看一下吧！