用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概述学习笔记
1.Spring概述 Spring致力于J2EE应用的各种解决方案,而不仅仅专注于某一层的方案. 可以说,Spring是企业应用开发的一站式选择,他贯穿于表现层.业务层.持久层. Spring并不想取 ...
- Vert.x 异步访问数据库 MySQL
Vert.x提供异步访问数据库的API,数据库操作是一个耗时操作,使用传统的同步模型,容易阻塞线程,导致整体性能下降,因此我们对于数据库操作,需要使用Vert.x提供的异步API. Vert.x提供的 ...
- CSS3 小黄人案例
使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: <div class="wrap"> <!-- 头发 --> <div class=&q ...
- Java服务端口被占用问题
在改code的时候eclipse突然崩溃了,未响应状态等了好久也没转完,只能结束进程了,再次打开eclipse果然无法启动项目.报的错误是端口被占用. 又不想重启电脑,只能记录下微服务下的卡死清理端口 ...
- IDEA配置自己的注释
File-->Setting-->Live Templates,点击+,选择2.Template Group... 创建Group,我的命名为MyAnnotation,然后选中MyAnnt ...
- DOS命令_查询某个端口的占用情况并释放
>netstat -aon | findstr “80″Proto Local Address Foreign Address State ...
- VS调试 DataTable （转载）
调试的时候遇到一个问题:不知道怎么在自动窗口或者添加监视那里查看DataSet或者DataTable的具体的值.度娘了一下很多都是添加DataTable.Rows[][]监视,但是一行一列地看还是有点 ...
- hive自定义函数学习
1介绍 Hive自定义函数包括三种UDF.UDAF.UDTF UDF(User-Defined-Function) 一进一出 UDAF(User- Defined Aggregation Funcat ...
- Load Balancing in gRPC
背景 基于每次调用的负载均衡 需要注意的是,gRPC的负载均衡发生在每次调用时,而不是每次连接时.换句话说,就算所有的请求来自于同一个客户,我们也希望可以将它们负载均衡到所有的服务器. 负载均衡的方法 ...
- Linux环境宿主机进入Docker容器、连接数据库、复制文件
我们默认mysql容器已经正常启动,以下为关键命令.1.docker exec -it mysql bash : 进入已经正常启动的容器bash中,mysql是指实际容器名称.2.mysql -uro ...