jquery怎么获取元素距离屏幕的位置

Posted 2023-03-21

$(window).height();//是文档窗口高度
$("div").offset().top//是标签距离顶部高度（没有到下面的距离，比如$("div").offset().down）
$("div").offset().left//是标签距离右边高度（没有到下面的距离，比如$("div").offset().right）
$(document).scrollTop();//是滚动条高度
$("div").height();//是标签高度
你要的高度+$("div").height()+[$("div").offset().top-$(document).scrollTop()]=$(window).height();

经过简单的数学变换即可得到你要的值了
获取页面某一元素的绝对X,Y坐标，可以用offset()：
var X = $(‘#DivID’).offset().top;
var Y = $(‘#DivID’).offset().left;
获取相对(父元素)位置:
var X = $(‘#DivID’).position().top;
var Y = $(‘#DivID’).position().left;
通过getBoundingClientRect方法获取对象位置，包含： left , top , right , bottom 4个参数值。 参考技术A

1.$(window).height();//是文档窗口高度；

2.$("div").offset().top//是标签距离顶部高度（没有到下面的距离，比如$("div").offset().down）；

3.$("div").offset().left//是标签距离右边高度（没有到下面的距离，比如$("div").offset().right）；

4.$(document).scrollTop();//是滚动条高度；

5.$("div").height();//是标签高度。

1.jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。

2.jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件

参考技术B document.documentElement.clientHeight
$(window).height() 可视范围
window.screen.availHeight 窗口大小不包括滚动条
window.screen.height 窗口大小
$(document.body).height() 窗口大小
document.body.scrollHeight 文档大小+padding
document.body.clientHeight 文档大小+padding
document.body.offsetHeight 文档大小+padding+border
$(document).height() 文档大小+padding+border+margin
$(document.body).outerHeight(true) 文档大小+padding+border+margin
$('#x').position().top 相对(父元素)位置
$('#x').offset().top 绝对位置
$(document).scrollTop() 获取滚动条到顶部的垂直高度

jquery获取元素与屏幕高度距离

 a. onscroll事件          scroll是css样式中overflow的一个值，意思是显示滚动条;当一个元素的实际高度超过他的最大高度是，只要设置了overflow为scroll
 b. $(..).scrollTop()  
 c. $(..).scrollTop(10) =>$(..).scrollLeft(10)

 d. 如何获取某个标签距离顶部高度
        $(..).offset()        获取当前标签距离文档顶部高度
        
        $(..).height()        永远获取自己的高度；             获取当前标签自己的高度
        $(..).innerHeight()   永远获取自己高度+padding;        获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
        $(..).outerHeight()   
                              参数一：false:
                                永远获取自己高度+padding+border; 获取第一个匹配元素外部高度（默认包括补白和边框）设置为 true 时，计算边距在内。
                              参数二：true
                                永远获取自己高度+padding+border+margin;