实现吸顶效果
在css中，使用position: sticky可以实现类似手机通讯录每组标题吸顶的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>吸顶效果</title> <style> h1 { position: sticky; top: 0px; margin-bottom: 0px; } </style> </head> <body> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> <h1>我是标题</h1> </body> </html>
运行发现，虽然每个标题都吸顶了，但是标题并没有移出屏幕，而是留在了最上方。
解决方案
我们只需要给需要吸顶的元素套上一个div容器即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>搜索页</title> <style> div { height: 100px; } h1 { position: sticky; top: 0px; margin-bottom: 0px; } </style> </head> <body> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> <div> <h1>我是标题</h1> </div> </body> </html>
运行效果，可以看到前一个标题会被后面的标题顶出去。
