jquery偏移函数应用示例

有时候我们需要实现这样一个功能：点击一个按钮，然后在按钮下面显示一个div。当按钮位于角落时，需要调整div的位置设置，否则div显示不完整。我计划用offset()方法来实现这个功能，但是我需要先知道它的功能。offset()的顶部指的是元素和文档上边缘之间的距离，而不是浏览器当前表单的上边缘，如图1所示。图1:1:文档高度超过窗口时，浏览器出现滚动条，提交按钮偏移量不变。

图2:文档中的div有滚动条，提交按钮的偏移量随着div的滚动而变化，与Document 无关。

偏移量()。左边也是一样。通过以上实验，我们可以得出以下结论：offset()获取的是引用远离文档上边缘和左边缘的元素(html元素)的像素，只要知道文档的哪个部分在浏览器中，就可以正确使用offset()。关于文档，可以阅读JQuery窗口、文档和正文，那么如何保证元素在浏览器窗口中完整显示呢？我们可以将偏移和滚动相结合。scrollTop得到了什么价值？根据我的实验，只有带有滚动条并且滚动了一定距离的元素才有scrollTop值，没有滚动条的元素scrollTop=0，比如一个按钮的scrollTop总是等于0。我以前有一个错误的理解：文档与其子元素具有相同的滚动值，这是错误的，子元素与容器的滚动值无关。根据图1(文档有滚动条)，你需要计算控件和滚动条的偏移量和高度；文件的；根据图2(文档没有滚动条)，计算控件的offsetTop和height源代码：jquery_offset.rar。