html+css+jq 悬浮导航栏

右侧导航栏，一直悬浮在右侧居中处，当导航栏到页面的最上面部分，导航栏消失，当鼠标滑动到页面的第二部分，导航栏出来，导航栏出现的位置在页面的第二部分和第三部分，即是页面的中部和下部。可设置描点跳转到页面位置

html代码

<div class="r_xnav">
                <ul class="rnav_ul">
                    <li>
                        <a href="#indnav_zyys">
                        第二部分
                        </a>
                    </li>
                    <li>
                        <a href="#indnav_jwcj">
                        第三部分
                        </a>
                    </li>
                    <li>
                        <a href="#fhdb">
                        第一部分
                        </a>
                    </li>
                </ul>
            </div>
<div id=”fhdb”></div>
<div id=”indnav_zyys”></div>
<div id=”indnav_jwcj”></div>

css代码

.r_xnav{
  float: right;
  right: 20px;
  position: fixed;
  top: 25%;
  width: 170px;
  height: 339px;
  background: url(../images/jdqs2/sys.png) no-repeat;
  display: none;
}

.rnav_ul{
  overflow: hidden;
  position: relative;
  top: 184px;
  width: 162px;
  left: -36px;
}
.rnav_ul li{
  cursor: pointer;
  font-family: "微软雅黑";
  text-align: center;
  list-style-type: none;
  height: 45px;
  color: white;
  // top: -12px;
  background: url(未选底框) no-repeat;
}
.rnav_ul li.cur,.rnav_ul li:hover{
  background: url(已选底框) no-repeat;
  
}
.rnav_ul li a.cur,.rnav_ul li a:hover{
  color: rgb(165, 132, 48);
}
.rnav_ul li a{
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  color: white;
  padding-top: 10px;
  padding-left: 10px;
}

jquery代码

$(document).bind('scroll',function(){
        var sTop=$(document).scrollTop();
        var sTop=parseInt(sTop);
        if(sTop>=850){
            $('.r_xnav').show();
            
        }
        if(sTop<850){
            $('.r_xnav').hide();
            // $('.ind_nav li').removeClass('cur');
        }
        if(1000<sTop<1500){
            // $('.ind_nav li').eq(0).addClass("cur").siblings('li').removeClass('cur');
            $('.rnav_ul li').eq(0).addClass("cur").siblings('li').removeClass('cur');
            $('.rnav_ul li').eq(0).find('a').addClass("cur")
            $('.rnav_ul li').eq(1).find('a').removeClass("cur")
        }
        if(1500<sTop){
            // $('.ind_nav li').eq(1).addClass("cur").siblings('li').removeClass('cur');
            $('.rnav_ul li').eq(1).addClass("cur").siblings('li').removeClass('cur');
            $('.rnav_ul li').eq(1).find('a').addClass("cur")
            $('.rnav_ul li').eq(0).find('a').removeClass("cur")
        }
    });