zoukankan      html  css  js  c++  java
  • 用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>

    完。

  • 相关阅读:
    移动端工作心得
    小程序初探
    你可能会用到的"奇技赢巧"
    一个知乎日报pwa
    Progressive Web Applications
    Java中的基本数据类型以及装箱、拆箱
    用sql获得指定记录的空段数目和字段名称--实在想不通,这种场景应用在哪
    putIfAbsent,一个字段为空的话,将该字段设置为指定值
    PO、VO、BO、POJO、DAO、DTO都是什么对象
    Java中字符串连接符(+)和append的区别
  • 原文地址:https://www.cnblogs.com/fqh123/p/12015433.html
Copyright © 2011-2022 走看看