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高度超過(guò)window，瀏覽器出現(xiàn)滾動(dòng)條，滾動(dòng)滾動(dòng)條，提交按鈕的offset不變。
圖2：document中的div有滾動(dòng)條，提交按鈕的offset隨div的滾動(dòng)變化而變化，與document無(wú)關(guān)
offset().left 同理。
通過(guò)上面的實(shí)驗(yàn)我們可以得出以下結(jié)論：offset() 獲取指元素(html 元素)距離document上邊緣、左邊緣的像素，我們只要清楚瀏覽器中document是那部分就可以正確使用offset()。關(guān)于document可以閱讀 JQuery window、document、 body
那么我們?cè)趺幢ＷC元素完整的顯示在瀏覽器視窗里呢？我們可以結(jié)合offset 和 scrollTop來(lái)實(shí)現(xiàn)。
scrollTop獲取的是什么值？根據(jù)我的實(shí)驗(yàn)，只有元素具有滾動(dòng)條，并且滾動(dòng)了一定距離，才有scrollTop值，沒(méi)有滾動(dòng)條的元素scrollTop=0，比如一個(gè)button的scrollTop恒等于0。以前我有種錯(cuò)誤的認(rèn)知：document與他里面的子元素具有相同的滾動(dòng)值，這是錯(cuò)誤的，子元素與容器的滾動(dòng)值無(wú)關(guān)。
按圖1(document有滾動(dòng)條)，需計(jì)算控件的offsetTop、高度，document的scrollTop；
按圖2(document無(wú)滾動(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)畫(huà)切換
- 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)疊層3D文字特效代碼分享
本文主要介紹了jquery實(shí)現(xiàn)疊層3D文字特效，實(shí)現(xiàn)很簡(jiǎn)單2015-08-08
jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)給table賦值的方法,結(jié)合具體實(shí)例形式分析了jQuery動(dòng)態(tài)操作table表格節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2017-07-07
下面小編就為大家?guī)?lái)一篇jquery tmpl模板(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
將form表單通過(guò)ajax實(shí)現(xiàn)無(wú)刷新提交的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇將form表單通過(guò)ajax實(shí)現(xiàn)無(wú)刷新提交的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery實(shí)現(xiàn)的電子時(shí)鐘效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的電子時(shí)鐘效果,結(jié)合完整實(shí)例形式分析了jQuery日期與時(shí)間操作技巧與相關(guān)函數(shù)使用注意事項(xiàng),需要的朋友可以參考下2018-04-04
將鼠標(biāo)焦點(diǎn)定位到文本框最后（代碼分享）
本文主要分享了將鼠標(biāo)焦點(diǎn)定位到文本框最后的實(shí)例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
淺析jquery與checkbox的checked屬性的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺析jquery與checkbox的checked屬性的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
jQuery.validate 常用方法及需要注意的問(wèn)題
jQuery.validate 常用方法及需要注意的問(wèn)題，需要的朋友可以參考一下2013-03-03
按Enter鍵觸發(fā)事件的jquery方法實(shí)現(xiàn)代碼
這篇文章主要介紹了按Enter鍵觸發(fā)事件的jquery方法,需要的朋友可以參考下2014-02-02
jquery正則表達(dá)式驗(yàn)證（手機(jī)號(hào)、身份證號(hào)、中文名稱(chēng)）
這篇文章主要介紹了jquery正則表達(dá)式驗(yàn)證，實(shí)現(xiàn)手機(jī)號(hào)、身份證號(hào)、中文名稱(chēng)驗(yàn)證，感興趣的小伙伴們可以參考一下2015-12-12