除了搜索框，或者导航栏等类型特效都可以采用相同的方式解决。无疑像效果图所演示的效果相对于固定导航栏来说要更难一些。有其它效果需要更改，请自行修改下方源码。
在线演示地址：https://www.jq22.com/webqd6165
效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动切换搜索框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
body{
margin: 0;
padding: 0;
font-size: 14px;
}
.box-1{
height: 200px;
background-color: #09BB07;
position: relative;
}
.box-1 .search{
height: 40px;
width: 80%;
border-radius: 20px;
border: none;
background-color: #fff;
position: absolute;
left: 10%;
bottom: -20px;
box-shadow: 0 0 5px #999;
z-index: 5;
transition:all 0.5s ease-in-out 0s;
top: auto;
padding: 0 10px;
box-sizing: border-box;
outline:none;
}
.box-1 .search.fixed{
height: 30px;
width: 70%;
border-radius: 15px;
border: none;
background-color: #eee;
position: fixed;
left: 20%;
top: 5px;
box-shadow: none;
bottom: auto;
}
.box-top{
height: 40px;
position: fixed;
width: 100%;
left: 0;
top: 0;
background-color: rgba(255,255,255,0);
z-index: 1;
transition:all 0.5s ease-in-out 0s;
}
.box-top.active{
background-color: rgba(255,255,255,1);
}
</style>
</head>
<body>
<div class="box-top" id="top"></div>
<div class="box-1">
<input type="text" class="search" id="search" placeholder="请输入搜索内容" autocomplete="off">
</div>
<div style="height: 1000px;background-color: #f3f3f3;">
<div style="text-align: center;color: #999;padding-top: 100px;">
<div>[email protected]</div>
<div>© 2019</div>
</div>
</div>
<script type="text/javascript">
var el_top=document.querySelector("#top"),el_search=document.querySelector("#search");
var height=el_search.offsetTop,flag=true;
document.addEventListener("scroll",function () {
if(document.documentElement.scrollTop>=height){
if(flag){
flag=false;
el_top.classList.add("active");
el_search.classList.add("fixed");
}
}else {
if(!flag){
flag=true;
el_top.classList.remove("active");
el_search.classList.remove("fixed");
}
}
},false);
</script>
</body>
</html>作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]
微信公众号：
web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。更多精彩文章，请扫下方二维码关注我的公众号
