动态绑定滚动条事件

我看看是否能描述清楚这个需求：

现在有两块相关的区域：左列表，右操作说明。列表可能很长，有垂直滚动条；那么在滚动的时候，希望右侧的操作说明保持不动，好随时查阅。

这好办，将右侧的操作说明所在的DIV的position设成fixed，如此即可在左侧列表滚动之时岿然不动矣。

问题是，整个页面也有一个垂直滚动条。当这个页面滚动条滚动时，这个fixed的操作说明，因为在屏幕中位置恒定不变，并不随整个页面滚动，结果变成遮盖了其他滚动下来的内容。完全变形。

咋整？

很简单，左侧列表滚动条滚动时，将操作说明设成fixed；页面滚动条滚动时，将操作说明的fixed去掉。

<script type="text/javascript">

//#div_pointXY_body 左侧列表
//#div_pointXY_OperNote 右侧操作说明

    var f_pointXY = function () {

        function bindscroll() {
            if (jQuery()) {//看看jquery是否已加载成功
                var top = offsettop = $("#div_pointXY_OperNote").offset().top;
                $("#div_pointXY_body").scroll(function () {//滚动之时绑定
                    $("#div_pointXY_OperNote").css("top", top + "px");
                    $("#div_pointXY_OperNote").css("position", "fixed");
                });
                $(window).scroll(function () {//滚动之时绑定
                    $("#div_pointXY_OperNote").css("top", "auto");
                    $("#div_pointXY_OperNote").css("position", "");
                    top = offsettop - $(window).scrollTop();
                });
            } else {
                setTimeout("f_pointXY.init()", 300);
            }
        }

        bindscroll();

        return {
            init: function () {
                bindscroll();
            }
        };

    }();
</script>

其中要点，在于区分jquery对象的offset()位置(相对页面的位置)及指定对象（DIV或页面）的垂直滚动条的已滚动距离scrollTop()。

参考资料：
阮一峰的 用Javascript获取页面元素的位置

猴赛雷。

转载于:https://www.cnblogs.com/leftfist/p/6808769.html