定位跟随--导航吸顶

效果图

跟随定位.gif

HTML

<div class="top">
   <!--导航开始-->
    <div id="nav" class="nav">
        <div class="logo">
            <h2><a href="#"><img src="images/taobao.jpg" alt=""></a></h2>        </div>
        <div class="search">
            <div class="left">
                <ul>
                    <li class="show">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>
            </div>
            <div class="center">
                <input type="text" placeholder="提早发年货啦">
                <i class="iconfont icon-search"></i> <!-- 引用字体图标-->
                <i class="iconfont icon-camera"></i>
            </div>
            <div class="right">
                <a href="">搜索</a>
            </div>
        </div>
    </div>
    <!--导航结束-->
</div>
<div class="bottom"></div>

样式

<style>
    *{margin: 0; padding: 0;}
    body{font-size: 12px;}
    .top{
        width: 100%;
        height: 415px;
        background: url("images/top.png") no-repeat;
        overflow: hidden;
        padding-top: 128px;
        box-sizing: border-box;
    }    
    .nav{
        width: 1300px;
        height: 50px;
        padding: 8px;
        margin: 0 auto;
        display: none;
        background-color: #fff;
        box-sizing: border-box;
    }
    .nav .logo{
        width: 100px;
        height: 33px;
        float: left;
    }
    .nav h2{
        width:100%;
        height: 100%;
    }
    .nav .search{
        width: 628px;
        height: 35px;
        border: 3px solid orangered;
        box-sizing: border-box;
        float: left;
        margin-left: 200px;
        position: relative;
    }
    .nav .search .left{
        width: 73px;
        height: 75px;
        box-sizing: border-box;
        float: left;
        position: relative;
    }
    .nav .search li{
        list-style: none;
        width: 100%;
        background-color: #eee;
        text-align: center;
        line-height: 29px;
        display: none;
        cursor: pointer;
    }
    .nav .search .left .show{
        display: block;
    }
    .nav .search .center{
        width: 427px;
        height: 29px;
        float: left;
        position: relative;
    }
    .nav .search .center input{
        width: 100%;
        height: 100%;
        border:none;
        padding-left: 28px;
        box-sizing: border-box;
    }
    .nav .search .center .icon-search{
        position: absolute;
        top: 6px;
        left: 8px;
        font-size: 18px;
        color: #ccc;
    }
    .nav .search .center .icon-camera{
        position: absolute;
        top: 6px;
        right: 8px;
        font-size: 20px;
        color: #aaa;
        cursor: pointer;
        font-weight: 500;
    }
    .nav .search .center .icon-camera:hover{
        color: orangered;
    }
    .nav .search .right{
        width: 122px;
        height: 29px;
        float: right;
        background-color: orangered;
        text-align: center;
    }
    .nav .search .right a{
        text-decoration: none;
        font-size: 20px;
        text-align: center;
        line-height: 29px;
        color: #fff;
    }
    .bottom{
        width: 100%;
        height: 540px;
        background:url("images/bottom.png");
    }
</style>

JS

<script>
    var nav = document.getElementById('nav');
    var navTop = 128;
    window.onscroll =function(){ 
       var top = document.body.scrollTop || document.documentElement.scrollTop;
        if(top>=navTop){
            nav.style.display = 'block';
            nav.style.top = 0+'px';
            nav.style.position = 'fixed';
        }else{
            nav.style.display = 'none' ;
           nav.style.position = 'static';
        }
    }
</script>
</body>

代码真的是几日不敲就会生疏，这不，这么简单的导航我做了好久，CSS样式技巧忘了很多。

• 网页整体布局要设置版心，这样在拉伸浏览器的时候里边的内容不会因浮动而往下“掉”。
• 字体图标的引入方式也重新复习了一遍。
• js的定位跟随是近期新学的知识点，用到了scrollTop，表示当前元素相对于垂直滚动条顶部的偏移，本次代码中就是body这个页面滚动的距离。