用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 ...
随机推荐
- docker下安装mysql数据库
因为用了.net core 所以想学习下使用docker: 项目中刚好要用到mysql数据库,所用用docker来安装一次,我使用的是5.6版本: 1.拉取官方镜像 docker pull mysql ...
- Java自学-数组 创建数组
Java 如何创建一个数组 数组是一个固定长度的,包含了相同类型数据的 容器 步骤 1 : 声明数组 int[] a; 声明了一个数组变量. []表示该变量是一个数组 int 表示数组里的每一个元素都 ...
- python全栈学习路线
python全栈学习路线-查询笔记 查询目录 一,硬件 十一,数据 ...
- js继承(十)
一.原型链继承[子构造函数的原型对象是父构造函数的实例][对原型属性和方法的继承]1.每个构造函数[prototype]都有一个原型对象,原型对象中都包含一个指向构造函数的指针[constructor ...
- 《区块链DAPP开发入门、代码实现、场景应用》笔记1——天外飞仙DAPP
Solidity编程语言解决了编写智能合约的不友好的问题,但是当合约编译并部署之后,对与这些接口的访问,对于一般的使用者来说,门槛有点高, 对普通用户来说也是非常不友好,为了使广大用户理解并方便快捷的 ...
- Java部分目录
一.Java基础 1.访问权限控制 2.重载和覆盖 3.面向对象的特征 4.接口和抽象类 5.Java环境变量配置 6.Java英文缩写详解 7.如何在Maven项目中引入自己的jar包 8.使用ba ...
- scrapy爬虫中间件-urlLength
浏览器里面能输入的最大url是有限制的 safari 最多 一万多 ie最少 2083 urllength中间件源码 谷歌和火狐正常 八千多 """ Url Lengt ...
- elasticsearch获取字段missing的数据
用head查询: demo如下 http://localhost:9200/sj_0505/lw_point_location/ _search post { "query": { ...
- Centos7搭建Harbor私有仓库(一)
1 说明 前文Centos7搭建DockerRegistry介绍了DockerRegistry的搭建,但它没有UI页面,因此选择Harbor 以下基于镜像CentOS-7-x86_64-Minimal ...
- MySQL Index--BNL/ICP/MRR/BKA
MySQL关联查询算法: BNL(Block Nested-Loop) ICP(Index Condition Pushdown) MRR(Multi-Range Read) BKA(Batched ...