jquery offset函數(shù)應(yīng)用實(shí)例
我們有時(shí)候需要實(shí)現(xiàn)這樣一種功能：點(diǎn)擊一個(gè)按鈕，然后在按鈕的下方顯示一個(gè)div。當(dāng)按鈕位于角落時(shí)，div的位置設(shè)定就需要調(diào)整，不然，div將顯示不完全。
我打算使用offset()方法實(shí)現(xiàn)此功能，但要先弄清楚他的功能。
offset()的top是指元素與document的上邊的距離，而不是瀏覽器當(dāng)前窗體的上邊緣，如圖1。
圖1：document高度超過window，瀏覽器出現(xiàn)滾動(dòng)條，滾動(dòng)滾動(dòng)條，提交按鈕的offset不變。
圖2：document中的div有滾動(dòng)條，提交按鈕的offset隨div的滾動(dòng)變化而變化，與document無關(guān)
offset().left 同理。
通過上面的實(shí)驗(yàn)我們可以得出以下結(jié)論：offset() 獲取指元素(html 元素)距離document上邊緣、左邊緣的像素，我們只要清楚瀏覽器中document是那部分就可以正確使用offset()。關(guān)于document可以閱讀 JQuery window、document、 body
那么我們?cè)趺幢ＷC元素完整的顯示在瀏覽器視窗里呢？我們可以結(jié)合offset 和 scrollTop來實(shí)現(xiàn)。
scrollTop獲取的是什么值？根據(jù)我的實(shí)驗(yàn)，只有元素具有滾動(dòng)條，并且滾動(dòng)了一定距離，才有scrollTop值，沒有滾動(dòng)條的元素scrollTop=0，比如一個(gè)button的scrollTop恒等于0。以前我有種錯(cuò)誤的認(rèn)知：document與他里面的子元素具有相同的滾動(dòng)值，這是錯(cuò)誤的，子元素與容器的滾動(dòng)值無關(guān)。
按圖1(document有滾動(dòng)條)，需計(jì)算控件的offsetTop、高度，document的scrollTop；
按圖2(document無滾動(dòng)條)，計(jì)算控件的offsetTop、高度
- Jquery中的offset()和position()深入剖析
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- jquery用offset()方法獲得元素的xy坐標(biāo)
- jquery根據(jù)錨點(diǎn)offset值實(shí)現(xiàn)動(dòng)畫切換
- js實(shí)現(xiàn)jquery的offset()方法實(shí)例
- jQuery中offset()方法用法實(shí)例
- jQuery中offsetParent()方法用法實(shí)例
- Jquery中offset()和position()的區(qū)別分析
- 淺談jQuery的offset()方法及示例分享
相關(guān)文章
JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法
這篇文章主要給大家介紹了關(guān)于JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法,通過本文的介紹你可以換掉千篇一律的默認(rèn)滾動(dòng)條,讓你的網(wǎng)站或web項(xiàng)目更具特色,文章通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了jquery.cookie.js用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jquery.cookie.js針對(duì)cookie的獲取、創(chuàng)建、設(shè)置、刪除等常用技巧,需要的朋友可以參考下2015-12-12
JQuery實(shí)現(xiàn)簡(jiǎn)單瀑布流布局
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)簡(jiǎn)單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在 jQuery UI 的最近更新中增加了自動(dòng)完成控件 AutoComplete，這為我們提供了又一個(gè)強(qiáng)大的開發(fā)工具，這里介紹一下這個(gè)控件的使用方式。2011-06-06
jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則
這篇文章主要介紹了jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
jquery動(dòng)態(tài)賦值id與動(dòng)態(tài)取id方法示例
這篇文章主要給大家介紹了關(guān)于jquery動(dòng)態(tài)賦值id與動(dòng)態(tài)取id的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
一句jQuery代碼實(shí)現(xiàn)返回頂部效果（簡(jiǎn)單實(shí)用）
本文主要分享了利用一句jQuery代碼實(shí)現(xiàn)返回頂部效果的實(shí)例。代碼簡(jiǎn)單，保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來看下吧2016-12-12
JQuery實(shí)現(xiàn)展開關(guān)閉層的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)展開關(guān)閉層的方法,實(shí)例分析了jQuery的slideToggle方法使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
懶加載實(shí)現(xiàn)的分頁(yè)&&網(wǎng)站footer自適應(yīng)
本文主要介紹了wap手機(jī)端懶加載分頁(yè)，web電腦端懶加載分頁(yè)以及web電腦端footer底部固定。具有很好的參考價(jià)值，下面就跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了jQuery使用之處理頁(yè)面元素用法,實(shí)例分析了jQuery針對(duì)元素的內(nèi)容、復(fù)制、移動(dòng)和替換等操作技巧,需要的朋友可以參考下2015-01-01