Jquery滚动条事件的处理

Jquery滚动条事件的处理

2013-04-21 18:09:07| 分类： JQuery|举报|字号 订阅
1。监听某个元素的滚动条事件

$(selector).scroll(function(){.......});

2.获取滚动条滚动的距离

$(selector).scrollTop();

$(selector).scrollLefft();

3.滚动条事件和offset方法的应用

实例1. 随浏览器滚动条而滚动的浮动div。例图：


代码：

#floatRight {

position:relative;

float:right;

width:200px; height:200px; background-color:green;

top:100px;

z-index:1000;

}

//滚动条滚动事件1

var oldSite=new Object();

oldSite.left=$("#floatRight").offset().left;

oldSite.top=$("#floatRight").offset().top;

$(window.document).scroll(function () {

var scrolltop = $(document).scrollTop();

var top=oldSite.top+scrolltop;

$("#floatRight").offset({ top: top });

});

实例2.虽dom元素内滚动条滚动而滚动的浮动div

实例图



#content {

width:600px; height:1000px; border:2px dotted red;

overflow:scroll;

margin:auto;

}

#contentFloat {

float:right;position:relative;

width:100px; height:100px; background-color:green;

top:100px;

}

//滚动条滚动事件2

var contentFloat = $("#contentFloat");

var top = contentFloat.offset().top;

$("#content").scroll(function () {

contentFloat.offset({top:top});

});