实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="../../jquery-3.2.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding:0;}
body{height:1500px;}
.context{width:100%;height:50px;background:rgba(150,150,150,0.5);
box-shadow:1px 2px 7px #ccc;position:fixed;}
.context form{width:600px;height:50px;background:rgba(100,100,100,0.5);margin:0 auto;line-height:50px;position:relative;}
.context form input{width:500px;height:30px;line-height:30px;margin:0 auto;
border-top-left-radius:20px;border-bottom-left-radius:20px;border:none;
padding-left:20px;
outline:none;}
.context form button{width:100px;height:30px;line-height:30px;border-top-right-radius:20px;
border-bottom-right-radius:20px;border:none;text-align:center;
position:absolute;right:0px;top:11px;
}
.pic{width:50%;height:400px;background-image:url(images/3.jpg);
margin:0 auto;}
.context1{background:rgba(160,3,162,0.4);}
</style>
</head>
<body>
<div class="context">
<form>
<input type="text" placeholder="#请输入此处#">
<button>全网搜</button>
</form>
</div>
<div class="pic"></div>
<div class="box"></div>
</body>
<script>
$(function(){
$(window).scroll(
function(){
if($(window).scrollTop()>60){
$('.context').css('display','none');
}else{
$('.context').css('display','block');
}
if($(window).scrollTop()>350){
$('.context').css('display','block');
$('.context').addClass('context1');
}else{
$('.context').removeClass('context1');
}
})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
