XiaoMi
/
xiaomi8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/scroll.js"></script>
    <style>
        body{

        }
        .pro_nav{

            width: 1290px;
            margin: 0 auto;
            height: 80px;
            line-height: 80px;
            border-top: #ccc solid 1px;
background: #fff;
            margin-bottom: 20px;

        }
        .pro_nav a{
            color:#333 ;
            margin-right: 5px;
        }
        .pro_nav span{
            color:#d9d9d9;
        }
        .pro_nav a:hover{
            color: #ff6600;
        }
        .pro_nav .left{
            float: left;
            font-size:18px;

        }
        .pro_nav .right{
            float: right;
            font-size: 16px;
        }
        .l{
            height: 1000px;
            width: 1290px;
            margin: 0 auto ;
            background: rgb(242,242,242);
        }
    </style>
</head>
<body>
<div id="top">
    <header>
        <div class="top_nav">
            <div class="left">
                <a href="#">小米商城</a>
                <a href="#">MIUI</a>
                <a href="#">loT</a>
                <a href="#">云服务</a>
                <a href="#">金融</a>
                <a href="#">有品</a>
                <a href="#">小爱开放平台</a>
                <a href="#">政企服务</a>
                <a href="#">资质证照</a>
                <a href="#">协议规则</a>
                <a href="#">下载app</a>
                <a href="#">Select Region</a>
            </div>
            <div class="right">
                <ul>
                    <li id="login"><a href="#">登录</a></li>
                    <li id="register"><a href="#">注册</a></li>
                    <li><a href="#">消息通知</a></li>
                    <li><a href="#">购物车 <img src="img/sidebar4.png" alt="">(0)</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="header_nav">
        <div class="header_nav_content">
            <div class="logo">
                <a href="#"><img src="./img/logo.jpg" alt=""></a>
            </div>
            <div class="e_nav">
                <ul>
                    <li class="first"><a href="#">小米手机</a>
                    </li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">新品</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>

            </div>
            <div class="header_search">
                <input type="text">
            </div>


            <div class="items">
                <ul>
                    <li><a href="#"><img src="img/sj1.png" alt=""></a><span>小米MIX3</span><i>3299元起</i></li>
                    <li><a href="#"><img src="img/sj2.png" alt=""></a><span>小米8青春版</span><i>1399元起</i></li>
                    <li><a href="#"><img src="img/sj3.png" alt=""></a><span>小米8</span><i>2699元起</i></li>
                    <li><a href="#"><img src="img/sj4.png" alt=""></a><span>小米play</span><i>1099元起</i></li>
                    <li><a href="#"><img src="img/sj5.png" alt=""></a><span>小米8SE</span><i>1699元起</i></li>
                </ul>
            </div>
        </div>
    </div >
</div>
<div class="pro_nav">
  <div class="left">
      <a href="#">小米8 青春版</a>
  </div>
    <div class="right">
        <a href="#">概述</a><span>|</span>
        <a href="#">图集</a><span>|</span>
        <a href="#">参数</a><span>|</span>
        <a href="#">F码通道</a><span>|</span>
        <a href="#">用户评价</a>
    </div>
</div>
<div class="l">

</div>
</body>
</html>
<script>
    //入口函数
    window.onload = function(){
        var oTop = document.getElementById('top');
        var oNav = document.querySelector('.pro_nav');

        var topH = oTop.offsetHeight;
        var navH = oNav.offsetHeight;

        //1.给window或document绑定滚动事件
        window.onscroll = function(){
            //2.条件一获取滚动条的高度 ,条件二 top的高度
            var scrollTop = scroll().top;
            //3.让滚动条的高度与 top的高度进行比较
            if(scrollTop > topH){
                //4.如果滚动条的高度大于top的高度,让nav固定在顶部
                oNav.style.position = "fixed";//固定在顶部
                oNav.style.top = "0px";
                oNav.style.left="104px"
                //让第一个div,帮nav留住位置
                oTop.style.marginBottom = navH + "px";
            } else {
                //5.否则 小于,让NAV回到原来的位置
                oTop.style.marginBottom = "0px";
                oNav.style.position = "static";
            }
        }
    }
</script>