Html
    Css
    Js


body {
	margin:0;
	padding:20;
	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);
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:2.1.4
 立即下載

搜索框頂部吸附效果(原創)

0
河北时时彩投注站