悬浮导航

<!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>页面悬浮导航</title>
  <style media="screen">

    a{
      text-decoration: none;
    }
    #suspendNav{
      position: absolute;
      top: 0;
      left: 0;
      background-color: #ccc;
      width: 100%;
      z-index: 1000;
      display: -webkit-flex;
      display: flex;
    }
    #suspendNav div{
      position: relative;
      border: #cc2132 1px solid;
      text-align: center;
      line-height: 30px;
      flex: 1;
    }
    .qq{
      height: 1200px;
      width: 300px;
      border: 1px solid red;
      padding-top: 30px;
    }
  </style>
</head>
<body>
  <div id="suspendNav">
    <!-- <h3>页面悬浮导航</h3> -->
    <div class=""><a href="#">导航1</a></div>
    <div class=""><a href="#">导航2</a></div>
    <div class=""><a href="#">导航3</a></div>
    <div class=""><a href="#">导航4</a></div>
    <div class=""><a href="#">导航5</a></div>
  </div>
  <div class="qq">
    <p>adadadda</p>
    <p>adadadda</p>
    <p>adadadda</p>
    <p>adadadda</p>
    <p>adadadda</p>
    <p>adadadda</p>
    <p>adadadda</p>
    <p>adadadda</p>

  </div>

  <script type="text/javascript">
    window.onload = function(){
      var suspendNav = document.getElementById('suspendNav');
      window.onscroll = function () {
        suspendNav.style.top = (document.documentElement.scrollTop||document.body.scrollTop)+'px';
        //body是DOM对象里的body子节点，即 <body> 标签；
        //documentElement 是整个节点树的根节点root，即<html> 标签；
        //页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
        //页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
        //为了兼容，不管有没有 DTD，可以使用以上代码。
      }
    }
  </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容