用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 ...
随机推荐
- JS把格林威治时间转换为北京标准时间
function fermitTime(time){ var now = new Date(time); var year = now.getFullYear(); ; var date= now.g ...
- Java 数组实例——实现棋盘落子
五子棋.连连看.俄罗斯方块.扫雷等常见小游戏,都可以通过二维数组实现. 棋盘落子效果图: 源码: package my_package; import java.io.BufferedReader; ...
- resfframework中修改序列化类的返回值
在序列化类中重写to_representation(self,instance)方法,这个是返回json对象的方法,返回的是一个待序列化的对象,可以直接对这个类进行定制,有关关联查询也可以在这里进行定 ...
- 小程序中的数据请求sessionid，保持登陆状态。
版权声明:本文为CSDN博主「weixin_43964779」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net ...
- 【OGG】OGG的单向复制配置-支持DDL(二)
[OGG]OGG的单向复制配置-支持DDL(二) 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的 ...
- MySQL 5.7开始支持JSON，那还有必要使用MongoDB存JSON吗？请列出你的观点/理由。
一.观点A:支持MySQL存储JSON MongoDB不支持事务,而MySQL支持事务 MySQL相对MongoDB而言,MySQL的稳定性要优于MongoDB MySQL支持多种存储引擎 二.观点B ...
- PHP中的十进制、八进制、二进制、十六进制
我们平时用的都是十进制. 比如:987这个数字,其本质就是7*10^0+8*10^1+9*10^2 个位数上的7,1就是1,十位上的8,1就是10,百位上的9,1是100 echo '<br&g ...
- 云计算与大数据实验：Hbase shell终端操作之数据操作一
[实验目的] 1)学会向表中添加记录 2)学会添加记录时动态添加列 3)学会查看一条记录 4)学会查看表中的记录总数 5)学会删除记录 [实验原理] Hbase shell作为Hbase数据的客户端, ...
- mongodb 安装pymongo 驱动
下载驱动包: https://pypi.org/project/pymongo/ 解压: tar zxvf pymongo-3.8.0.tar.gz 安装: python setup.py i ...
- Python +appium baseview
封装python+appium 的baseview模块 from selenium.webdriver.support.ui import WebDriverWait from time import ...