顶部悬浮效果

最终效果：

顶部悬浮.gif

html代码：

<style>
*{
    padding: 0;
    margin: 0;
}
.search{
    width: 100%;
    height: 0;
    border-bottom:none;
    overflow: hidden;
    transition:height 1s;
    position:fixed;
    top: 0;
    left: 0;
    background-color: #fff;
}
.search input{
    display:block;
    border:3px solid #f00;
    margin:10px auto;
    width: 500px;
    height: 30px;
    padding-left:6px;
}
.top{
    width: 100%;
    height: 100px;
    background-color: orange;
}
.nav{
    width: 100%;
    height: 200px;
    background-color: #0f0;
}
.container{
    width: 100%;
    height: 600px;
    background-color: #f00;
}
.flink{
    width: 100%;
    height: 300px;
    background-color: #00f;
}
.foot{
    width: 100%;
    height: 100px;
    background-color: #ccc;
}
<div class="search">
    <input type="text" placeholder="雷神笔记本">
</div>
<div class="top"></div>
<div class="nav"></div>
<div class="container"></div>
<div class="flink"></div>
<div class="foot"></div>

js代码：

// 获取顶部的搜索框div
var searchBox = document.querySelector('.search')
// 在拖动滚动条的时候，不停的判断滚动条是否到达指定的位置
window.onscroll = function(){
    // 获取滚动条滚动过的距离
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(t);
    // 判断距离是否到达500
    if(t>=500){
        // 让最上面的搜索框添加下边框并悬浮在顶部
        searchBox.style.borderBottom = '5px solid #999';
        searchBox.style.height = '60px';
    }else{
        // 滚动条上去后降下边框取消并将高度设置为0
        searchBox.style.borderBottom = 'none';
        searchBox.style.height = '0';
    }
}