用jquery做一个带导航的名单列表
代码：
<!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:#fafafa; padding:0 10px; } .nameList{ height:80px; border-bottom:1px solid #ededed; padding:0 10px; font-weight: bold; background:#ffffff; display:flex; direction: row; } .nameList .leftBox{ float:left; width:24%; height:80px; display: flex; justify-content:center; } .leftBox .photoImgBox{ height:80px; display: flex; justify-content:center; align-items:center; } .photoImgBox img{ height:80%; width:auto; } .nameList .rightBox{ float:left; width:70%; padding-top:20px; } .rightBox .specialNameBox{ font-weight:bold; } .rightBox .companyNameBox{ font-weight: normal; color:#666666; font-size:14px; } #rightNavBox{ position: fixed; right:0; top:30px; width:30px; bottom:0; background:#ffffff; display: none; } #rightNavBox a{ display: block; text-align: center; font-size:14px; line-height:20px; color:#828282; } #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 class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="b" name="b">B</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="c" name="c">C</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="d" name="d">D</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="e" name="e">E</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="f" name="f">F</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="g" name="g">G</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="h" name="h">H</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="i" name="i">I</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="j" name="j">J</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="k" name="k">K</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="l" name="l">L</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="m" name="m">M</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="n" name="n">N</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="o" name="o">O</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="p" name="p">P</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="q" name="q">Q</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="r" name="r">R</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="s" name="s">S</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="t" name="t">T</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="u" name="u">U</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="v" name="v">V</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="w" name="w">W</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="x" name="x">X</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="y" name="y">Y</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </div> </div> <div class="itemWraper"> <a id="z" name="z">Z</a> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院（南京医科大学第一附属医院）</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox">江苏省人民医院</div> </div> </div> <div class="nameList"> <div class="leftBox"> <div class="photoImgBox"> <img src="./images/photo.png" alt="头像"> </div> </div> <div class="rightBox"> <div class="specialNameBox">包名威</div> <div class="companyNameBox"></div> </div> </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>
完。