jQuery获得页面元素的绝对/相对位置

简介:

 

获取页面某一元素的绝对X,Y坐标,可以用offset()方法:

var X = $('#DivID').offset().top;

var Y = $('#DivID').offset().left;

 

获取相对(父元素)位置:

var X = $('#DivID').position().top;

var Y = $('#DivID').position().left;

让Div随滚动条移动:

<div id="oLayer" style="position: absolute; left: 0; top:80px; z-index: 2; background: a9c9ef; margin-left:6px;
            width: 140px; height: 70px">

</div>

jquery代码:

       $(window).scroll(function() {
                                            var init_pos = $('#oLayer').offset().top;
                                            $('#oLayer').css("top", $(window).scrollTop()+80)
                                        });

目录
相关文章
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
125 11
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
124 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
148 0
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
107 2
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
123 6
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
186 2
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
100 1
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
91 0
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
174 0