指定某個div隨著指定大div滾動，而不是隨著整個窗口固定不動
阿新 • • 發佈：2017-08-12
ons oat mil all script 而不是 var off padding
.left{float: left}
.qi{width: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);
$(‘.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>
<!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{width:80%;margin:500px auto 0;}
.big{width:60%;height:2000px;background: #ddd;}
.small{width:30%;height:500px;background: pink;}
.left{float: left}
.qi{width: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>
指定某個div隨著指定大div滾動，而不是隨著整個窗口固定不動