监测右侧栏目距离顶部和底部悬浮

HTML代码部分

<div id="rl_news">
         <div class="rvan">
                  <div class="zxtg">
                        <ul>
                            <li><a href=""><span class="zxtg_img1"><img src="images/bd.png" alt=""></span><h3>我要投稿</h3></a></li>
                            <li><a href=""><span class="zxtg_img1"><img src="images/bd.png" alt=""></span><h3>我要投稿</h3></a></li>
                            <li><a href=""><span class="zxtg_img1"><img src="images/bd.png" alt=""></span><h3>我要投稿</h3></a></li>
                            <li><a href=""><span class="zxtg_img1"><img src="images/bd.png" alt=""></span><h3>我要投稿</h3></a></li>
                        </ul>
                  </div>
                    <div class="clear"></div>
           </div>
</div>

说明：rvan后面接两种样式

<style>
        .r_navi {
    width: 300px;
    position: fixed;
    top: 70px;//距离头部
}
        .r_navib {
    width: 300px;
    position: fixed;
    bottom: 310px;//距离底部
}
    </style>

js代码部分

<script>

$(window).scroll(function() {
        var x = $("#rl_news").offset();
        var b = $(".yqlj").offset();//距离底部位置footer标签
        var y = $(window).scrollTop();
        var zz = b.top - y;
        var z = x.top - y;
        var yy = 400 - y;
        //        $(document).attr("title", z + "|" + zz);

        if(z < -100 && zz > 500) {
            $('.rvan').addClass('r_navi');
            $('.rvan').removeClass('r_navib');
            $('.rvan').css("top", "");
        } else if(zz <= 500) {

            $('.rvan').addClass('r_navib');
            $('.rvan').removeClass('r_navi');
            $('.rvan').css("top", (zz - 450) + "px");

        } else {

            $('.rvan').removeClass('r_navib');
            $('.rvan').removeClass('r_navi');
        }
    });
</script>