实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.当滚动条下拉时触发事件</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.content{
width: 100%; height: 60px;
background: rgba(160, 3, 162, 0.1);
box-shadow: 1px 3px 7px #ccc;
line-height: 60px;
position: fixed; /* 固定定位 */
}
.content-2{
background: rgba(160, 3, 162, 0.1);
/* background: red; */
}
form{
width: 500px; height: 35px;
position: relative; /* 相对定位 */
margin: 0 auto;
}
input{
width: 480px; height: 35px;
border-radius: 20px;
border: none;
outline: none; /* 去掉自带焦点 */
padding-left: 20px; /* 将input框里面的光标往右移动 */
}
button{
width: 70px; height: 35px;
order: none;
border: none;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color: #fff;
position: absolute; /* 绝对定位 */
right: 0;
top: 13.4px;
outline: none;
font-weight: bold;
background: rgba(160, 3, 162, 0.4);
}
[placeholder]{
color: rgba(160, 3, 162, 0.6);
}
.slide{
width: 70%; height: 400px;
background: url(3.jpg);
margin: 0 auto;
}
.box{
width: 70%; height: 1200px;
background: rgba(92, 88, 92, 0.1);
margin: 0 auto;
}
a{text-decoration:none;color:red;font-weight:bold;}
.r-menu{
position:fixed;
width:50px;
height:50px;
background:pink;
bottom:50px;
right:10px;
border-radius:50%;
line-height:50px;
text-align:center;
display:none;
}
</style>
</head>
<body>
<!-- 顶部导航navigation -->
<div class="content">
<form>
<input type="text" placeholder="请输入搜索内容...">
<button>搜索</button>
</form>
</div>
<!-- 轮播图 -->
<div class="slide"></div>
<!-- 主体内容 -->
<div class="box"></div>
<!-- 返回顶部按钮 -->
<div class="r-menu">
<a href="javascript:;" id="backTop">顶部</a>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(window).scroll(function(){
// 判断滚动条向下滚动是否大于60
if($(window).scrollTop() > 60){
$('.content').hide(); // 大于60就隐藏导航栏
}else{
$('.content').show(); // 反之就是小与60,为显示
}
// 判断滚动条向下滚动是否大于400
if($(window).scrollTop() > 400){
// 大于400就添加样式和设置为块级元素
$('.content').addClass('content-2').css('display','block');
}else{
// 反之删除元素
$('.content').removeClass('content-2');
}
});
// 进度条大于100的时候显示返回顶部的按钮
$(window).on('scroll',function(){
if($(window).scrollTop() > 100){
$('.r-menu').fadeIn(200);
}else{
$('.r-menu').fadeOut(200);
}
});
// 点击顶部按钮时返回到浏览器顶部
$('#backTop').click(function(){
$('html,body').animate({scrollTop:'0'},100);
});
});
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
素材: 3.jpg
