网页吸顶

Posted 2020-12-29 ngdty

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页吸顶相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{margin:0;padding:0;}
       #header{
           width: 100%;
           height: 200px;
       }

       ul,li{list-style: none;}
       #nav{
           width: 100%;
           height: 80px;
           background: #000;
       }
       #nav>ul>li{
           float: left;
           text-align: center;
           line-height: 80px;
           color: #fff;
           width: 80px;
       }
   </style>
</head>
<body style="height:3000px;">
   <div id="header"></div>
   <div id="nav">
       <ul>
           <li>首页</li>
           <li>文档</li>
           <li>我的</li>
           <li>设置</li>
       </ul>
   </div>
</body>
</html>
<script>
   var oNav = document.getElementById("nav");
   window.onscroll = function () {
       var sTop = document.documentElement.scrollTop || document.body.scrollTop;
       if(sTop>=200){
           oNav.style.position = "fixed";
           oNav.style.top = 0;
       }else{
           oNav.style.position = "static";
       }
   }

</script>

以上是关于网页吸顶的主要内容，如果未能解决你的问题，请参考以下文章