实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<title>Document</title>
</head>
<style>
*{margin:0px;padding:0px;}
.header{width:100%;height:30px;background:rgba(160,2,163,0.1);position: fixed;}
.container{text-align:center;position:relative;width:800px;margin:0px auto;height:30px;line-height: 25px;}
input{height:20px;width:300px;position:relative}
button{height:20px;position: absolute;top:4px;margin-left:5px;}
.box{
width:800px;height:600px;border:1px solid red;margin:0px auto;
}
.box2{
width:800px;height:1200px;border:1px solid red;margin:0px auto;
}
.blank{height:30px;width:100%;}
.top{width:30px;height:80px;position:fixed;bottom:0px;right:0px;}
</style>
<body>
<div class="header">
<div class="container">
<form>
<input type="text" name="search">
<button>搜索</button>
</form>
</div>
</div>
<div class="blank" name="top">
</div>
<div class="box">
</div>
<div class="box2">
</div>
<div class="top">
<a href="#top">顶部</a>
</div>
<script>
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$('.header').css('display', 'none')
} else {
$('.header').css({ 'display': 'block', 'background': 'rgba(160,2,163,0.1)' })
}
if ($(window).scrollTop() > 600) {
$('.header').css({ 'display': 'block', 'background': 'rgba(160,2,163,0.5)' })
}
if ($(window).scrollTop() > 800) {
$('.top').css('display', 'block')
} else {
$('.top').css('display', 'none')
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
