jqueryoffset函數(shù)應(yīng)用實(shí)例_jquery
來源:懂視網(wǎng)
責(zé)編:小采
時間:2020-11-27 21:05:29
jqueryoffset函數(shù)應(yīng)用實(shí)例_jquery
jqueryoffset函數(shù)應(yīng)用實(shí)例_jquery:我們有時候需要實(shí)現(xiàn)這樣一種功能:點(diǎn)擊一個按鈕,然后在按鈕的下方顯示一個div。當(dāng)按鈕位于角落時,div的位置設(shè)定就需要調(diào)整,不然,div將顯示不完全。 我打算使用offset()方法實(shí)現(xiàn)此功能,但要先弄清楚他的功能。 offset()的top是指元素與document
導(dǎo)讀jqueryoffset函數(shù)應(yīng)用實(shí)例_jquery:我們有時候需要實(shí)現(xiàn)這樣一種功能:點(diǎn)擊一個按鈕,然后在按鈕的下方顯示一個div。當(dāng)按鈕位于角落時,div的位置設(shè)定就需要調(diào)整,不然,div將顯示不完全。 我打算使用offset()方法實(shí)現(xiàn)此功能,但要先弄清楚他的功能。 offset()的top是指元素與document

我們有時候需要實(shí)現(xiàn)這樣一種功能:點(diǎn)擊一個按鈕,然后在按鈕的下方顯示一個div。當(dāng)按鈕位于角落時,div的位置設(shè)定就需要調(diào)整,不然,div將顯示不完全。
我打算使用offset()方法實(shí)現(xiàn)此功能,但要先弄清楚他的功能。
offset()的top是指元素與document的上邊的距離,而不是瀏覽器當(dāng)前窗體的上邊緣,如圖1。
圖1:document高度超過window,瀏覽器出現(xiàn)滾動條,滾動滾動條,提交按鈕的offset不變。

圖2:document中的div有滾動條,提交按鈕的offset隨div的滾動變化而變化,與document無關(guān)

offset().left 同理。
通過上面的實(shí)驗(yàn)我們可以得出以下結(jié)論:offset() 獲取指元素(html 元素)距離document上邊緣、左邊緣的像素,我們只要清楚瀏覽器中document是那部分就可以正確使用offset()。關(guān)于document可以閱讀 JQuery window、document、 body
那么我們怎么保證元素完整的顯示在瀏覽器視窗里呢?我們可以結(jié)合offset 和 scrollTop來實(shí)現(xiàn)。
scrollTop獲取的是什么值?根據(jù)我的實(shí)驗(yàn),只有元素具有滾動條,并且滾動了一定距離,才有scrollTop值,沒有滾動條的元素scrollTop=0,比如一個button的scrollTop恒等于0。以前我有種錯誤的認(rèn)知:document與他里面的子元素具有相同的滾動值,這是錯誤的,子元素與容器的滾動值無關(guān)。
按圖1(document有滾動條),需計(jì)算控件的offsetTop、高度,document的scrollTop;
按圖2(document無滾動條),計(jì)算控件的offsetTop、高度
源代碼:jquery_offset.rar
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
jqueryoffset函數(shù)應(yīng)用實(shí)例_jquery
jqueryoffset函數(shù)應(yīng)用實(shí)例_jquery:我們有時候需要實(shí)現(xiàn)這樣一種功能:點(diǎn)擊一個按鈕,然后在按鈕的下方顯示一個div。當(dāng)按鈕位于角落時,div的位置設(shè)定就需要調(diào)整,不然,div將顯示不完全。 我打算使用offset()方法實(shí)現(xiàn)此功能,但要先弄清楚他的功能。 offset()的top是指元素與document