jQuery獲取div距離視窗頂部或者父元素頂部的距離
在實際應用或許會需要計算出指定div距離視窗或則它的父元素的頂部的距離。
下面通過例項對此做一下簡單的介紹,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } #box{ width:200px; height:200px; background-color:blue; top:100px; left:100px; padding:50px; position:absolute; } #inner{ width:100px; height:100px; background-color:red; } span{color:red;} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function(){ $("#first").text($("#inner").offset().top); $("#second").text($("#inner").position().top); $("#third").text($("#inner").offset().top-$("body").scrollTop()); }) }) </script> </head> <body style="height:1000px;"> <div id="box"> <div id="inner"></div> </div> <div style="margin-top:420px;"> 距離文件頂部距離:<span id="first"></span> 距離父元素頂部的距離:<span id="second"></span> 距離視窗頂部的距離:<span id="third"></span> </div> <input type="button" id="bt" value="點選顯示結果"> </body> </html>
點選按鈕可以在span元素中顯示相應的距離尺寸,關於在程式碼中使用的函式和屬性建議參閱相關閱讀中的文章。
相關閱讀:
(1).offset()參閱jQuery offset()方法一章節。
(2).position()參閱jQuery position()方法一章節。
(3).scrollTop()參閱jQuery scrollTop()方法一章節。
(4).text()參閱jQuery text()方法一章節。
相關文章
- JavaScript 元素距離視窗頂部的距離JavaScript
- JavaScript獲取元素距離文件頂部的距離JavaScript
- javascript獲取元素距離網頁頂部的距離JavaScript網頁
- 原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離JS瀏覽器
- vue js 獲取滾動距離 以及 返回頂部按鈕VueJS
- 獲取DOM元素到頁面頂部的距離,親測有效版本(轉載)
- jQuery獲取網頁中的元素距離文件邊緣的距離程式碼例項jQuery網頁
- js向下滾動一段距離出現返回頂部按鈕JS
- 拖動滾動條一定距離可以固定於頂部的導航欄
- jQuery iframe子視窗獲取父視窗元素簡單介紹jQuery
- 最小距離分類器,互動式選取影像樣本分類資料,進行最小距離分類(實現歐式距離,馬氏距離,計程距離)
- jQuery之回到頂部jQuery
- Jquery回到頂部功能jQuery
- 曼哈頓距離與切比雪夫距離的互化
- PostgreSQL遺傳學應用-矩陣相似距離計算(歐式距離,…XX距離)SQL矩陣
- 編輯距離及編輯距離演算法演算法
- 如何獲取向下滾動的距離
- Laravel 距離排序Laravel排序
- div有滾動條 返回頂部
- javascript在iframe子元素中獲取父視窗元素JavaScript
- jQuery文字從頂部掉落效果jQuery
- 透過經緯度計算距離獲取附近商家
- Vijos1680距離/openjudge2988計算字串的距離[DP]字串
- 距離度量學習
- 【DP】編輯距離
- 關於父視窗獲取跨域iframe子視窗中的元素跨域
- milvus 使用 l2 歐式距離計算向量的距離,計算出來的距離的最大值是多少?
- jQuery在子視窗如何操作父視窗元素jQuery
- jQuery返回頂部按鈕詳解jQuery
- jquery頂部固定層下拉導航jQuery
- java 經緯度處理、計算兩地的距離、獲取當前一定距離以內的經緯度值Java
- 空間距離計算
- 獲取資料庫中到指定經緯度距離的座標資料庫
- jquery經典例項之回到頂部jQuery
- jquery實現返回頁面頂部功能。jQuery
- CSS3元素水平運動指定距離CSSS3
- 回到頂部和回到頂部按鈕的顯示隱藏
- js返回頂部JS