article {
border: solid 1px black;
height: 200px;
width: 200px;
overflow: scroll;
}
h2 {
background-color: blue;
position: sticky;
top: 0;
}
<article>
<section>
<h2>asfasdf</h2>
<p>
asdfsfasfdasfdasfdasfsafdf
asdfsfasfdasfdasfdasfsafdf
asdfsfasfdasfdasfdasfsafdf
asdfsfasfdasfdasfdasfsafdf
asdfsfasfdasfdasfdasfsafdf
asdfsfasfdasfdasfdasfsafdf
asdfsfasfdasfdasfdasfsafdf
asdfsfasfdasfdasfdasfsafdf
</p>
</section>
<section>
<h2>222222222</h2>
<p>dsfsafasfasfsadfsafdafdsf
safasfasfsadfsafdafdsfsa
fasfasfsadfsafdafdsfsafa
sfasfsadfsafdafdsfsafasf
sfasfsadfsafdafdsfsafasf
sfasfsadfsafdafdsfsafasf
sfasfsadfsafdafdsfsafasf
sfasfsadfsafdafdsfsafasf
asfsadfsafdaf</p>
</section>
</article>
注意,这里的position: sticky;和top: 0;需要同时使用才可以产生粘性效果,就是h2标签到顶部后会固定住,等待下面的元素往上拖动是再向上,相当于固定定位和绝对定位结合使用,但感觉这种效果不太常见,项目中没有这么用的