<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>位置操作</title> <style> .aa{ background-color: palegreen; width: 30%; float: left; position: fixed; top: 10px; /*left: 20px;*/ } .bb{ width: 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>