<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位置操作</title>
<style>
.aa{
background-color: palegreen;
30%;
float: left;
position: fixed;
top: 10px;
/*left: 20px;*/
}
.bb{
70%;
float: right;
background-color: green;
}
.cc{
background-color: #dddddd;
border-style: solid;
border-color: palegreen;
font-size: 30px;
}
.dd{
background-color: aqua;
height: 2000px;
border-color: black;
border-style: dashed;
}
.ff{
background-color: black;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<!--offsect:标签距离屏幕左上角的距离有多远，距离顶部多远，距离左边多远-->
<!--position:标签距离自己的父标签的距离有多远,距离顶部多远，距离左边多远-->
<!--heiht:标签的高度,不包括边框-->
<!--weight:标签的宽度,不包括边框-->
<div class="aa">
<div id="cui1" class="cc">第一章</div>
<div id="cui2" class="cc">第二章</div>
<div id="cui3" class="cc">第三章</div>
</div>
<div class="bb">
<div class="dd" sb="cui1">内容一</div>
<div class="dd" sb="cui2">内容二</div>
<div class="dd" sb="cui3">内容三</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
window.onscroll = function () {
// 给整个窗口绑定一个滑轮移动的事件，只要滑轮移动就会触发这个事件
var ws = $(window).scrollTop()
// 这个的意思是滑轮移动的距离
$(".bb").children().each(function () {
var off = $(this).offset()
// 这个的意思是计算每个标签距离顶部和左边的距离
var offtop = off.top
h = $(this).height() + offtop
// 这个的意思是计算标签距离顶部的高度
// console.log(ws)
if(ws>offtop && ws < h){
h = $(this).height() + offtop
var x = $(this).attr("sb")
var tmp_id = "#" + x
$(tmp_id).addClass("ff")
}else {
h = $(this).height() + offtop
var x = $(this).attr("sb")
var tmp_id = "#" + x
$(tmp_id).removeClass("ff")
}
})
}
})
</script>
</body>
</html>