js浏览器窗口滚动,突出显示当前窗口的内容
<!DOCTYPE html>
<html>
<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">
<title></title>
<style type="text/css">
.demo {
height: 300px;
margin: 10px;
background-color: chartreuse;
font-size: 80px;
text-align: center;
line-height: 300px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="demo ">0</div>
<div class="demo ">1</div>
<div class="demo ">2</div>
<div class="demo ">3</div>
<div class="demo ">4</div>
<div class="demo ">5</div>
<div class="demo ">6</div>
<div class="demo ">7</div>
<div class="demo ">8</div>
<div class="demo ">9</div>
</body>
<script src="./jquery.js"></script>
<script>
$(window).scroll(function() {
var windowH = $(window).height();
var scrollTop = $(window).scrollTop(); // 滚动的距离
if (scrollTop == 0) {
console.log('顶部');
}
if (scrollTop + windowH == $(document).height()) {
console.log('下拉到底了');
}
$(".demo").each(function() {
var top = $(this).offset().top; // 距离的高度,不变
var index = $(this).index();
var divH = $(this).height();
var topH = top - scrollTop;
var bottomH = windowH - topH - divH;
if (topH > 0 && bottomH > 0) {
$(this).css({
"background-color":"greenyellow"
})
} else {
$(this).css({
"background-color": "yellow"
})
}
console.log('当前索引编号= ' + index + ' 顶部高度= ' + top);
console.log('topH=' + topH)
console.log('bottomH=' + bottomH)
});
})
</script>
</html>
