效果：
代码：
<!DOCTYPE html> <html lang="en"> <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"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <title>Document</title> <style> *{ margin:0; padding:0; list-style: none; text-decoration: none; } .topBox{ height:100px; background:green; } .contentBox{ } .itemWraper>a{ display: block; height:30px; line-height:30px; background:#ccc; border-bottom:1px solid black; padding:0 10px; } .nameList{ height:50px; line-height:50px; border-bottom:1px solid pink; padding:0 10px; font-weight: bold; background:yellow; } #rightNavBox{ position: fixed; right:0; top:30px; width:30px; bottom:0; background:purple; display: none; } #rightNavBox a{ display: block; text-align: center; line-height:24px; color:#ffffff; } #topInfoBox{ position: fixed; top:0; height:30px; line-height: 30px; padding:0 10px; background:rgba(0,0,0,.5); right:0; left:0; display: none; } </style> </head> <body> <div class="topBox"></div> <div id="topInfoBox"></div> <div id="rightNavBox"> <a href="#a">A</a> <a href="#b">B</a> <a href="#c">C</a> <a href="#d">D</a> <a href="#e">E</a> <a href="#f">F</a> <a href="#g">G</a> <a href="#h">H</a> <a href="#i">I</a> <a href="#j">J</a> <a href="#k">K</a> <a href="#l">L</a> <a href="#m">M</a> <a href="#n">N</a> <a href="#o">O</a> <a href="#p">P</a> <a href="#q">Q</a> <a href="#r">R</a> <a href="#s">S</a> <a href="#t">T</a> <a href="#u">U</a> <a href="#v">V</a> <a href="#w">W</a> <a href="#x">X</a> <a href="#y">Y</a> <a href="#z">Z</a> </div> <div class="contentBox"> <div class="itemWraper"> <a id="a" name="a">A</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="b" name="b">B</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="c" name="c">C</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="d" name="d">D</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="e" name="e">E</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="f" name="f">F</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="g" name="g">G</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="h" name="h">H</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="i" name="i">I</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="j" name="j">J</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="k" name="k">K</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="l" name="l">L</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="m" name="m">M</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="n" name="n">N</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="o" name="o">O</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="p" name="p">P</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="q" name="q">Q</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="r" name="r">R</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="s" name="s">S</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="t" name="t">T</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="u" name="u">U</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="v" name="v">V</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="w" name="w">W</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="x" name="x">X</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="y" name="y">Y</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> <div class="itemWraper"> <a id="z" name="z">Z</a> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> <div class="nameList">姓名</div> </div> </div> <script> $(window).scroll(function(){ if($(window).scrollTop() > $(".itemWraper:first").offset().top){ $("#topInfoBox").show(); $("#rightNavBox").show(); $(".itemWraper").each(function () { if ($(window).scrollTop() >= $(this).offset().top) { $("#topInfoBox").text($(this).find("a").text()) } }); }else{ $("#topInfoBox").hide(); $("#rightNavBox").hide(); } }) </script> </body> </html>
完。