动态绑定滚动条事件

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

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



这好办，将右侧的操作说明所在的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获取页面元素的位置

猴赛雷。