|
|
今天乞丐在美化一个房产头部菜单代码的时候，需要做到导航随着页面下拉固定在顶部的位置，但是还得照顾到菜单上部分的内容，这里给出一段代码，效果非常不错，你可以保存到本地的html页面直接双击预览效果就可以
- <!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>
- </head>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
-
- .box {
- height: 2000px;
- }
-
- #wrap {
- background-color: rgba(0, 0, 0, 0.2);
- width: 100%;
- height: 100px;
- }
-
- #wrap[data-fixed="fixed"] {
- position: fixed;
- top: 0;
- left: 0;
- margin: 0;
- }
-
- .content {
- height: 2000px;
- }
-
- p {
- height: 500px;
- }
- </style>
- <body>
- <div class="box">
- <p>
- <div id="wrap"></div>
- </p>
- <div class="content">
- hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world
- hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
- world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world
- hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world
- hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world
- hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello
- worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
- world hello world hello world hello worldhello world
- </div>
- </div>
- </body>
- <script>
- var obj = document.getElementById("wrap");
- var ot = obj.offsetTop;
- document.onscroll = function() {
- var st = document.body.scrollTop || document.documentElement.scrollTop;
- obj.setAttribute("data-fixed", st >= ot ? "fixed" : "")
- }
- </script>
- </html>
|
|
发表于 2022-4-10 12:45:35
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享