jquery小效果：新浪游戏右侧导航菜单 （页面效果）

偷盗：新浪游戏右侧导航菜单

http://games.sina.com.cn

效果：

随着页面的滚动，左侧页面的内容，和右侧的导航菜单的按钮文字对应；

点击右侧的导航按钮，左侧页面滚动到相应的内容

2016-3-2　　又改一版，下面是文字版的

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    //右侧fixed导航 start
    //返回顶部
    $('.right-nav .gotop').click(function (e) {
        $('html,body').animate({scrollTop:0 },400);
    });
    //点击右侧导航，跳转
    $('.right-nav .gozxrj').click(function (e) {
        e.preventDefault();
        var id = $(this).attr('href');
        var top = $(id).offset().top;
        $('html,body').animate({scrollTop:top-20 },400);
    });

    $(window).scroll(function(e){
        var top = $(window).scrollTop();
        var posarr = [];
        var cur = -1;
        $('.right-nav .gozxrj').each(function (i, el) {
            var id = $(el).attr('href');
            offset = top - $(id).offset().top + 160;
            posarr.push(offset);
            if(offset<0){
                cur = i;
                return false;
            }
        });
        //console.log(posarr);
        var length = $('.gozxrj').length;
        if(posarr[length-1]&&(posarr[length-1]>0)){cur=length;}
        if( (cur==0) && posarr[0]<0 ){cur=-1;}
        if(cur==-1){
            $('.right-nav .gozxrj').removeClass('hover');
        }else{
            $('.right-nav .gozxrj').eq(cur-1).addClass('hover').siblings('.gozxrj').removeClass('hover');
        }
    });

});
</script>
<style type="text/css">
a{text-decoration:none;}
.bg{margin:0 auto;width:1190px;height:700px;background:#f0f0f0;margin-bottom:20px;}

/*首页-右侧导航*/
.right-nav {position:fixed;width:78px; bottom:20px;left:50%;margin-left:613px;z-index:9999;}
.right-nav .abtn {display:block;width:70px;height:30px;border:2px solid #f1dece;border-radius:12px;text-align:center;margin-bottom:40px;line-height:30px;font-size:14px;font-weight:bold;
position:relative;transition:all 0.3s;background:#fff;color:#333;border-color:#f1dece;
}
/*.right-nav .abtn .a1s {width:72px;height:72px;}*/
.right-nav .abtn .a1s {display:block;position:absolute;top:50%;left:50%;margin-left:-36px;margin-top:-36px;width:72px;height:36px;visibility:hidden;border:none;border-radius:50%;
    padding:18px 0;text-align:center;color:#fff;line-height:18px;font-size:14px;box-sizing:content-box;font-family:'Microsoft YaHei';
    /*background:url('images/rightnav.png')no-repeat center center;*/
    background:#ff7200;
    -webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;
    transform-origin:50%;
    transition:all 0.3s;
    -webkit-transform:scale(0.4);
    -moz-transform:scale(0.4);
    -ms-transform:scale(0.4);
    -o-transform:scale(0.4);
    transform:scale(0.4);
}
.right-nav .abtn:hover,.right-nav .abtn.hover {z-index:2;}
.right-nav .abtn:hover .a1s,.right-nav .abtn.hover .a1s {
    visibility:visible;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.right-nav .gotop .gotopimg{margin-top:4px;width:20px;height:24px;}
</style>

<div class="bg" id="zxrjtitle1">准备装修</div>
<div class="bg" id="zxrjtitle2">正装修中</div>
<div class="bg" id="zxrjtitle3">完工秀场</div>
<div class="bg" id="zxrjtitle4">日记达人</div>
<div class="bg" id="zxrjtitle5">啊啊啊啊</div>
<div class="bg" id="zxrjtitle6">鹅鹅鹅鹅</div>
<div class="bg" id="zxrjtitle7">榜单榜单</div>
<div class="right-nav">
    <a href="#zxrjtitle1" class="abtn gozxrj">准备装修<span class="a1s">准备<br>装修</span></a>
    <a href="#zxrjtitle2" class="abtn gozxrj">正装修中<span class="a1s">正装<br>修中</span></a>
    <a href="#zxrjtitle3" class="abtn gozxrj">完工秀场<span class="a1s">完工<br>秀场</span></a>
    <a href="#zxrjtitle4" class="abtn gozxrj">日记达人<span class="a1s">日记<br>达人</span></a>
    <a href="#zxrjtitle5" class="abtn gozxrj">啊啊啊啊<span class="a1s">啊啊<br>啊啊</span></a>
    <a href="#zxrjtitle6" class="abtn gozxrj">鹅鹅鹅鹅<span class="a1s">鹅鹅<br>鹅鹅</span></a>
    <a href="#zxrjtitle7" class="abtn gozxrj">榜单榜单<span class="a1s">榜单<br>榜单</span></a>
    <a href="#top"        class="abtn gotop"><img src="data:images/gotop0.png" width="20" height="24" border="0" class="gotopimg"><span style="background:url('images/step0.png')" class="a1s"></span></a>
</div>

1、右边按钮控制左边没问题；

2、左边滚屏时，对右边按钮的控制，略有小问题：

在首屏时，右边按钮不关闭；在4屏显示完后，右边不关闭。暂时做如下处理，以后再改善。　　2016-2-26

    $(window).scroll(function(e){
        var top = $(window).scrollTop();
        var posarr = [];
        var cur = -1;
        $('.right-nav .gozxrj').each(function (i, el) {
            var id = $(el).attr('href');
            offset = top - $(id).offset().top + 160;
            posarr.push(offset);
            if(offset<0){
                cur = i;
                return false;
            }
        });
        //console.log(posarr);
        var length = 4;
        if(posarr[length-1]&&(posarr[length-1]>0)){cur=length;}
        if( (cur==0) && posarr[0]<0 ){cur=-1;}

        if(cur==-1){
            $('.right-nav .gozxrj').removeClass('hover');
        }else{
            $('.right-nav .gozxrj').eq(cur-1).addClass('hover').siblings('.gozxrj').removeClass('hover');
        }
    });

..