<!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> * { margin: 0; padding: 0; } .top { width: 100%; height: 1000px; background-color: #ccc; } .header { width: 100%; line-height: 80px; background-color: #999; position: sticky; /*关键属性*/ top: 0; /*设定固定位置*/ } </style> </head> <body> <div class="top"> 这是测试文字 </div> <div class="header"> 这是要固定的导航 </div> <div class="top"> 这是测试文字 </div> <p>文字</p> </body> </html>
除了兼容性不太好之外，还是挺好用的。