<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动事件</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;}
.box{80%;margin:500px auto 0;}
.big{60%;height:2000px;background: #ddd;}
.small{30%;height:500px;background: pink;}
.left{float: left}
.qi{100%;height:1000px;background: blue;clear:both;}
</style>
</head>
<body>
<div class="box">
<div class="big left"></div>
<div class="small left"></div>
</div>
<div class='qi'>
</div>
<script>
// 获取大div的高度
var big_hieight=$('.big').height();
console.log(big_hieight);
// 获取距离窗口的距离
var box_top=$('.box').offset().top;
$(window).scroll(function(){
// 获取滚动条的滚动的距离
var windowtop=$(window).scrollTop();
if( windowtop>box_top && windowtop<big_hieight){
$('.small').css("display","block");
$('.small').offset({top:windowtop+20,left:825});
}else if(windowtop<box_top){
$('.small').offset({top:box_top,left:825})
}
if(windowtop>big_hieight+200){
$('.small').css("display","none");
}
})
</script>
</body>
</html>
关注微信小程序
