<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body ,html{
width: 100%;
height: 100%;
}
.box1{
transition: 1s;
transform:translate(0px,-40px);
background: aquamarine!important;
}
.box3{
transition: 1s;
transform:translate(0px,-40px);
background: palevioletred!important;
}
</style>
</head>
<body>
<div style="width: 100%;height:1500px"></div>
<div class='box' style="width: 100%;height: 300px;background: red;margin-bottom:50px;font-size: 50px;">fuck</div>
<div class='box2' style="width: 100%;height: 300px;background: red;margin-bottom:50px;font-size: 50px;">all</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script>
$(window).on("scroll",function(){
//1) offset();方法获取的元素相对于当前document元素的位置，可以将其理解为一个绝对位置
//2) offsetTop为一个元素相对于器offsetParent的top位置。
//3) offsetParent为元素的中距离其最近的一个父元素，这个父元素的position属性为absolute或relative的
//4) offsetParent可以通过jQuery的offsetParent()方法获取
if($(".box").offset().top - $(this).scrollTop()<=$(this).height()){
$('.box').addClass('box1')
}
if($(".box2").offset().top - $(this).scrollTop()<=$(this).height()){
$('.box2').addClass('box3')
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号