用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>
完。
用jquery做一个带导航的名单列表的更多相关文章
- 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- 用Jquery做一个时间日期选择器
今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...
- jquery做一个表单验证
正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/参数;(这个最常用) 正则表达式的规则 和其他语言的正则表达式规则一样,可以参考我的另一边博文 ...
- jquery做一个小的轮播插件---有BUG，后续修改
//首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
- 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset=" ...
- 如何用CSS和jQuery实现一个侧滑导航菜单
为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...
- 用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
- 【UI组件】——用jQuery做一个上拉刷新
技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each( ...
- jQuery做一个小小的移动图片的位置
样式图点击按钮移动: jQuery代码如下: $(function () { //上 $("#btnUp").click(function () { var ...
随机推荐
- Spring-Cloud之Feign声明式调用-4
一.Feign受Retrofit.JAXRS-2.0和WebSocket影响,采用了声明式API 接口的风格,将Java Http 客户端绑定到它的内部. Feign 首要目的是将 Java Http ...
- kube-state-metrics 详解
原文:https://mp.weixin.qq.com/s/176eyFBknzdA5wpiJrxDSg 概述 已经有了 cadvisor.heapster.metric-server,几乎容器运行的 ...
- nginx反向代理、缓存及压缩配置实战
一.反向代理配置 (原文链接:http://www.studyshare.cn/blog/details/1155/0 ) 准备:两个项目分别使用端口8080,8081,只有一个备案域名,配置如下 ...
- 2019 字节跳动java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.字节跳动等公司offer,岗位是Java后端开发,因为发展原因最终选择去了字节跳动,入职一年时间了,也成为了面 ...
- aria2 https
https://github.com/aria2/aria2/issues/361 ... and also make sure that aria2 was built with HTTPS sup ...
- Qt Creator 的下载与安装
一.Qt和Qt Creator的区别 Qt是C++的一个库,或者说是开发框架,里面集成了一些库函数,提高开发效率. Qt Creator是一个IDE,就是一个平台,一个开发环境,类似的比如说VS,也可 ...
- IntelliJ idea鼠标移动到类上显示文档document（javadoc）内容
IntelliJ idea鼠标移动到类上显示文档document(javadoc)内容 Step 1:设置鼠标移动到类上自动显示Javadoc文档 step2:为jdk下载javadoc Step3: ...
- Django:内置组件Content-Type
12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...
- mysql高级用法（1）- mariadb的主从搭建
Mariadb介绍: mariadb是mysql的一个分支,需要进一步了解的参考:https://mariadb.org/ 安装参考教程:window版安装:Mariadb 介绍 1 (安装) lin ...
- Python学习日记(二十六) 封装和几个装饰器函数
封装 广义上的封装,它其实是一种面向对象的思想,它能够保护代码;狭义上的封装是面向对象三大特性之一,能把属性和方法都藏起来不让人看见 私有属性 私有属性表示方式即在一个属性名前加上两个双下划线 cla ...