jQuery 位置操作

jQuery 的位置操作主要有三个： offset() 、 position() 、 scrollTop()/scrollLeft() , 具体介绍如下 :

语法

1.offset（）设置或获取元素偏移

offset（）方法设置或返回被选元素相对于文档的偏移坐标，跟腹肌没有关系。

该方法有2个属性left，offset（），top 用于获取距离文档顶部的距离，offset（）.left用于获取距离文档左侧的距离。

可以设置元素的偏移：offset（{top：10，left：30}）；

2.position（）获取元素偏移

position（）方法用于返回被选元素相对带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

该方法有2个属性left，top。position（）.top用于获取父级顶部的距离；position.left用于获取距离定位父级左侧的距离。

该方法只能获取。

3.scrollTop（）/scrollLeft（）设置或获取元素被卷去的头部和左侧

scrollTop（）方法设置或返回被选元素被卷去的头部。

不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

代码演示

< body >

< div class = "father" >

< div class = "son" >< /div>

< /div>

< div class = "back" > 返回顶部 < /div>

< div class = "container" >< /div>

< script >

$ ( function () {

// 1. 获取设置距离文档的位置（偏移） offset

console . log ( $ ( ".son" ). offset ());

console . log ( $ ( ".son" ). offset (). top );

// $(".son").offset({

// top: 200,

// left: 200

// });

// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以

文档为准

// 这个方法只能获取不能设置偏移

console . log ( $ ( ".son" ). position ());

// $(".son").position({

// top: 200,

// left: 200

// });

// 3. 被卷去的头部

$ ( document ). scrollTop ( 100 );

// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()

// 页面滚动事件

var boxTop = $ ( ".container" ). offset (). top ;

$ ( window ). scroll ( function () {

// console.log(11);

console . log ( $ ( document ). scrollTop ());

if ( $ ( document ). scrollTop () >= boxTop ) {

$ ( ".back" ). fadeIn ();

} else {

$ ( ".back" ). fadeOut ();

}