仿小米首页中的导航页

最新推荐文章于 2023-12-11 20:52:21 发布

codekjy

最新推荐文章于 2023-12-11 20:52:21 发布

阅读量112

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/qq_47997447/article/details/120613387

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    a {
      text-decoration: none;
      color: #616161;
    }

    body {
      color: #212121
    }

    .nav-bar {
      margin-top: 140px;
      width: 100%;
      background-color: white;
      height: 63px;
      border: 1px solid rgb(224, 224, 224);
      border-left: 0px;
      border-right: 0px;

    }

    #diyige {
      margin: 0px;
      position: fixed;
      top: -65px;
      transition: all .3s;
    }

    #diyige.active {
      top: 0px;
    }

    .container {
      width: 1226px;
      height: 60px;
      background-color: white;
      margin: 0px auto;

    }

    .container .xiaomi {
      display: inline-block;
      line-height: 60px;
      font-size: 18px;
      font-weight: 400;
    }

    .separator {
      margin: 0.5em;
      color: #424242;
    }

    .mizi {
      font-size: 12px;
    }

    .container .biaoqian {
      display: inline-block;
      float: right;
      height: 30px;
      margin-top: 17px;
    }

    .shuxian {
      color: #e0e0e0;
      font-size: 14px;
      line-height: 21px;
      margin: 0px 3.5px;
    }

    .container .biaoqian a:not(.buy) {
      color: #616161;
      font-size: 14px;
      line-height: 21px;
      text-decoration: none;
    }

    .container .biaoqian a:hover {
      color: #ff6700;
    }

    .container .biaoqian .buy {
      width: 118px;
      height: 28px;
      border: 1px solid rgb(255, 103, 0);
      display: inline-block;
      background-color: rgb(255, 103, 0);
      text-align: center;
      color: white;
      line-height: 28px;
      font-size: 12px;
      text-decoration: none;
      margin-left: 5px;
      transition: all .3s;
    }

    .container .biaoqian .buy:hover {
      background-color: #f25807;
      border-color: #f25807;
      color: white;
    }

  </style>
</head>
<body>
<div class="nav-bar" id="diyige">
  <div class="container">
    <h2 class="xiaomi">小米 MIX5</h2>
    <span class="separator">|</span>
    <a href="#" class="mizi"> MIX FOLD 小米折叠屏手机</a>
    <div class="biaoqian">
      <a href="#">概述页</a>
      <span class="shuxian">|</span>
      <a href="#">参数页</a>
      <span class="shuxian">|</span>
      <a href="#">F码通道</a>
      <span class="shuxian">|</span>
      <a href="#">咨询客服</a>
      <span class="shuxian">|</span>
      <a href="#">用户评价</a>
      <span class="shuxian">|</span>
      <a href="#" class="buy">立即购买</a>
    </div>
  </div>

</div>
<div class="nav-bar" id="dierge">
  <div class="container">
    <h2 class="xiaomi">小米 MIX4</h2>
    <span class="separator">|</span>
    <a href="#" class="mizi"> MIX FOLD 小米折叠屏手机</a>
    <div class="biaoqian">
      <a href="#">概述页</a>
      <span class="shuxian">|</span>
      <a href="#">参数页</a>
      <span class="shuxian">|</span>
      <a href="#">F码通道</a>
      <span class="shuxian">|</span>
      <a href="#">咨询客服</a>
      <span class="shuxian">|</span>
      <a href="#">用户评价</a>
      <span class="shuxian">|</span>
      <a href="#" class="buy">立即购买</a>
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>
<script>
  (function () {
    var diyige = document.getElementById('diyige')
    var dierge = document.getElementById('dierge')
    var y = dierge.offsetHeight + dierge.offsetTop
    var show = function () {
      diyige.classList.add('active')

    }
    var hide = function () {
      diyige.classList.remove('active')
    }
    window.addEventListener('scroll', function () {
      if (window.scrollY > y) {
        show()
      } else {
        hide()
      }
    })
    var positionY = 0;
    var timer = window.setInterval(function () {
      positionY += 1;
      if (positionY <= dierge.offsetTop) {
        window.scrollTo(0, positionY)
      } else {
        clearInterval(timer)
      }

    }, 10)
  })()
</script>
</body>
</html>

效果图：