Jquery中用offset（）.top和offsetTop的比較

最後更新：2017-04-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：hot undefined scrolltop window 使用擷取函數位置 int

今天，想測試一個div與頂部的距離，用的是.offsetTop，但是offsetTop獲得的值，怎麼都列印不出來。折騰了半天，列印的結果都是undefined，雖然網上很多資料都說返回的是數值。雖然這個函數永不了，但是黃顯欽找到了一個可以替代offsetTop的函數。那就是jquery的offset().top

我們先來瞭解一下，什麼是offset（）.top和offsetTop？

offsetTop

解析一：

假設 obj 為某個 HTML 控制項。

obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算上側位置，整型，單位像素。

解析二：

當前對象到其上級層頂部的距離.

不能對其進行賦值.設定對象到頁面頂部的距離請用style.top屬性.

這是從網上找到的兩種解析，您看著用，我也沒搞懂，主要是列印不出offsetTop來。

如果需要擷取當前元素到document的高度，建議使用jquery的offset().top。下面我們解析一下offset().top。

offset().top

offset()的top是指元素與document的上邊的距離，而不是瀏覽器當前表單的上邊緣，1。

圖1：document高度超過window，瀏覽器出現捲軸，滾動捲軸，提交按鈕的offset不變。

圖2：document中的div有捲軸，提交按鈕的offset隨div的滾動變化而變化，與document無關

從上面這兩個圖，我們就知道jquery的offset.top的用法區別了。

執行個體一：判斷DIV何時出現

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>js</title><script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {$(window).scroll(function () {    var a = document.getElementById("eq").offsetTop;    console.log("offsetTop:",a);    var b = $(window).scrollTop();    var c = $(window).scrollTop()+$(window).height();    console.log("window.scrollTop:",b);    if (c >= a) {        console.log("----",a,c);    }});});</script></head><body><div style="width:1px;height:2000px;"></div><div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div><div style="width:1px;height:2000px;"></div></body></html>

執行個體二：

類似豆瓣首頁的熱門活動，當滾動到那的時候一直在頂部

//返回頂部        $(‘.toTopShortBtn‘).hide();        var back = $(‘.toTopShortBtn a‘);        back.click(function() {            var timer = setInterval(function(){                $(window).scrollTop($(window).scrollTop()-50);                if($(window).scrollTop() == 0){                    clearInterval(timer);                }            },2);        });        var a = $(".hothuodong").offset().top;        $(window).scroll( function() {            if($(window).scrollTop() > 400){                $(‘.toTopShortBtn‘).show();            }else{                $(‘.toTopShortBtn‘).hide();            }            var b = $(window).scrollTop();            if (b >= a) {                $(".hothuodong").css(‘position‘,‘fixed‘);            }else{                $(".hothuodong").css(‘position‘,‘static‘);            }        });

Jquery中用offset（）.top和offsetTop的比較

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More