首页 新闻 会员 周边 捐助

侧边导航指针移动滞后

0
悬赏园豆：10 [已关闭问题] 关闭于 2017-03-13 14:52

我仿照百度百科做了侧边导航，现在点击导航没问题。缓慢滚动鼠标也可以，但是如果快速滚动或者拖动页面滚动条，指针移动就会滞后。图片我没传上来，请大神帮我看看。

<body>
    <div class="sn_m ks-clear">
        <div class="sidenavwrap">
            <div class="sidenav">
                <nav>
                    <img class="ks-shown" alt="" src="images/sn_circle.png" width="10" height="10" />
                    <div class="sidenav_list">
                        <i class="siednav_list_arrow"></i>
                        <a href="#title1" class="sidenav_list_title">
                            <i></i>
                            1 大标题一
                        </a>
                        <a href="#subtitle1.1">1.1 小标题</a>
                        <a href="#subtitle1.2">1.2 小标题</a>
                        <a href="#subtitle1.3">1.3 小标题</a>
                        <a href="#title2" class="sidenav_list_title">
                            <i></i>
                            2 大标题二
                        </a>
                        <a href="#subtitle2.1">2.1 小标题</a>
                        <a href="#subtitle2.2">2.2 小标题</a>
                        <a href="#title3" class="sidenav_list_title">
                            <i></i>
                            3 大标题三
                        </a>
                        <a href="#title4" class="sidenav_list_title">
                            <i></i>
                            4 大标题四
                        </a>
                        <a href="#subtitle4.1">4.1 小标题</a>
                        <a href="#subtitle4.2">4.2 小标题</a>
                        <a href="#subtitle4.3">4.3 小标题</a>
                        <a href="#subtitle4.4">4.4 小标题</a>
                    </div>
                    <img class="ks-shown" alt="" src="images/sn_circle.png" width="10" height="10" />
                </nav>
            </div>
        </div>
        <article id="arti">
            <a name="title1" class="sn_m_t">大标题一</a>
            <a name="subtitle1.1" class="sn_m_st">小标题1.1</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="subtitle1.2" class="sn_m_st">小标题1.2</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="subtitle1.3" class="sn_m_st">小标题1.3</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="title2" class="sn_m_t">大标题二</a>
            <a name="subtitle2.1" class="sn_m_st">小标题2.1</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="subtitle2.2" class="sn_m_st">小标题2.2</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="title3" class="sn_m_t">大标题三</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="title4" class="sn_m_t">大标题四</a>
            <a name="subtitle4.1" class="sn_m_st">小标题4.1</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="subtitle4.2" class="sn_m_st">小标题4.2</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="subtitle4.3" class="sn_m_st">小标题4.3</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
            <a name="subtitle4.4" class="sn_m_st">小标题4.4</a>
            <p>页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；页主要由百科名片和正文内容和一些辅助的信息组成；百科名片包括概述和基本信息栏，其中概述为整个词条的简介，对全文进行概括性的介绍，基本信息栏主要是以表单的形式列出关键的信息点；</p>
        </article>
    </div>
</body>
html
body {
  behavior: url("css/sideNav_csshover.htc");
  margin: 0;
  color: #444;
  background-color: #F5F5F5;
  line-height: 1.5;
}
html {
    font-size: 12px;
    font-family: "微软雅黑", arial, tahoma, \5b8b\4f53;
}
a {
  color: #666;
  text-decoration: none;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
.ks-clear {
  *zoom: 1;
}
.ks-clear:before,
.ks-clear:after {
  display: table;
  content: "";
}
.ks-clear:after {
  clear: both;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;padding:0;
}
.sn_m {
    max-width: 1137px;
    margin: 0 auto;
    border-left: solid 1px #E5E5E5;
    border-right: solid 1px #E5E5E5;
    background-color: white;
}
.sidenavwrap {
    position: relative;
    z-index: 1000;
    float: right;
    width: 281px;
}
.sn_m article {
    width: 819px;
    padding-left: 29px;
    float: left;
}
.sn_m article p {
    font-size: 14px;
    text-indent: 2em;
}
.sidenav {
    position: fixed;
    z-index: 2000;
    bottom: 10px;
    width: 261px;
}
.sidenav nav {margin-bottom: 10px;}
.sidenav_list {
    padding-left: 20px;
    background: url(images/sn_line.jpg) repeat-y 5px 0;
    position: relative;
    z-index: 3000;
}
.sidenav_list a:link, .sidenav_list a:visited {
    display: block;
    line-height: 27px;
    font-size: 14px;
    padding-left: 20px;
}
.sidenav_list a:hover {background-color: #F5F5F5;}
.sidenav_list a.sidenav_list_title:link, .sidenav_list a.sidenav_list_title:visited {
    font-weight: 700;
    padding-left: 10px;
    position: relative;
    z-index: 3000;
}
.sidenav_list a.sidenav_list_title:link i, .sidenav_list a.sidenav_list_title:visited i {
    position: absolute;
    z-index: 3500;
    left: -19.5px;
    top: 8.5px;
    width: 10px;
    height: 10px;
    background: url(images/sn_icon.png) no-repeat;
}
.sidenav_list a.sidenav_list_title:hover i {
    background-position: -100px 0;
}
.sn_m_t {
    font-weight: 700;
    font-size: 18px;
    display: block;
}
.sn_m_st {
    font-weight: 700;
    font-size: 14px;
}
.siednav_list_arrow {
    position: absolute;
    z-index: 4000;
    width: 18px;
    height: 13px;
    left: 0;
    top: 7px;
    background: url(images/sn_icon.png) no-repeat -200px 0;
}
css
$(function(){
            var oDivListJq=$('.sidenav_list');
            var aAListJq=$('a', oDivListJq);
            var oIArrowJq=$('i:first', oDivListJq);
            var oAListFJq=$('a:first', oDivListJq);
            var iALineHJq=parseInt(oAListFJq.css('line-height'));
            var iArrowHJq=parseInt(oIArrowJq.css('height'));
            var iArrowTIJq=(iALineHJq-iArrowHJq)/2;
            var oArtiJq=$('#arti');

            aAListJq.click(function(){
                var iIndexJq=aAListJq.index(this);
                var iArrowTopJq=(iIndexJq+1)*iALineHJq-(iALineHJq-iArrowTIJq);

                oIArrowJq.animate({top:iArrowTopJq+'px'}, 400);
            });

            function scrolls(){
                var iSrollTJq=$(window).scrollTop();
                var aATitleJq=$('a[name]', oArtiJq);
                var aTitTop=[];

                function arrTT(){
                    aATitleJq.each(function(){
                        var iTitTopJq=$(this).offset().top;

                        aTitTop.push(iTitTopJq);
                    });
                    return aTitTop;
                };

                arrTT();

                for(var i=aTitTop.length-1;i>=0;i--){
                    if(iSrollTJq>=aTitTop[i]){
                        var iArrowTSJq=(i+1)*iALineHJq-(iALineHJq-iArrowTIJq);

                        oIArrowJq.animate({top:iArrowTSJq+'px'}, 400);
                        break;
                    }
                };
            };

            $(window).scroll(scrolls);
        });
js
zanetti的主页 zanetti | 初学一级 | 园豆：128
提问于：2017-02-23 17:38
< >
分享
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。