用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 ...
随机推荐
- C# 多线程与高并发处理并且具备暂停、继续、停止功能
--近期有一个需要运用多线程的项目,会有并发概率,所以写了一份代码,可能有写地方还不完善,后续有需求在改 1 /// <summary> /// 并发对象 /// </summary ...
- 2019 唯品会java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.唯品会等公司offer,岗位是Java后端开发,因为发展原因最终选择去了唯品会,入职一年时间了,也成为了面试官 ...
- 神奇的外部嵌套（使用ROW_NUMBER()查询带条件的时候提示列名无效）
declare @pageIndex int -- 第几页 declare @pageSize int -- 每页包含的记录数 --这里注意一下,不能直接把变量放在这里,要用select select ...
- 利用onMouseOver和onMouseOut实现图像翻滚
代码: <img src="images/001.jpg" alt="pic" onmouseover="this.src='images/00 ...
- MySQL DDL--MySQL 5.7版本Online DDL操作
主键索引维护 1.新增主键索引 ## 可以使用ALGORITHM=INPLACE+LOCK=NONE方式,操作期间允许读写. ALTER TABLE tb001 ADD PRIMARY KEY (ID ...
- 【Java字节码】Idea中查看Java字节码的插件jclasslib Bytecode viewer
Idea插件搜索:jclasslib Bytecode viewer 安装完后,maven install你的项目(因为该插件会读取target下的class文件),然后选中某个java文件,按下图操 ...
- Linux设备管理——sysfs、udev
What is the use of Sysfs sysfs is a pseudo file system provided by the Linux kernel that exports inf ...
- 攻防世界WEB高手进阶之python_template_injection
python模板注入 看了一堆文章,也不是看的很明白,反而把题目做出来了 大概思路如下 简单探测 http://111.198.29.45:42611/{{7+7}} 返回 说明服务器执行了{{}}里 ...
- Selenium+TestNG+CSV数据驱动
1.工程的目录结构: # saas SAAS_UI自动化测试工程 # 一.工程的目录结构 1.saas/src是工程的入口 a.saas/src/main/java/com/saas/encapsul ...
- 51nod 1254 最大子段和 V2
N个整数组成的序列a[1],a[2],a[3],…,a[n],你可以对数组中的一对元素进行交换,并且交换后求a[1]至a[n]的最大子段和,所能得到的结果是所有交换中最大的.当所给的整数均为负数时和为 ...