https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#Sticky_positioning
1、relative、fixed的结合。
2、不脱离文档流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { height: 100%; } body { overflow: hidden; margin-top: 200px; border: 1px dashed red; } ul { overflow: auto; height: 100%; counter-reset: ul 0; } ul li { counter-reset: li, 0; } ul li h1 { position: sticky; top: 10px; } ul li h1::before { counter-increment: ul; content: 'h1-'counter(ul); } ul li p { padding: 30px; } ul li p::before { counter-increment: li; content: 'p-'counter(li); } </style> </head> <body> <ul> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> <li> <h1></h1> <p></p> </li> </ul> </body> </html>