मैं jQuery का उपयोग करके किसी तत्व की पूर्ण स्थिति कैसे प्राप्त करूं?


398

क्या jQuery का उपयोग करते हुए, खिड़की की शुरुआत के सापेक्ष एक तत्व की पूर्ण स्थिति खोजने का एक तरीका है?

जवाबों:


650

.offset() एक साधारण वस्तु के रूप में एक तत्व की ऑफसेट स्थिति लौटाएगा, जैसे:

var position = $(element).offset(); // position = { left: 42, top: 567 }

आप एक ही स्थान पर अन्य तत्वों की स्थिति के लिए इस वापसी मूल्य का उपयोग कर सकते हैं:

$(anotherElement).css(position)

90
मैं हमेशा इस एक को भूल जाता हूं, और आपके पोस्ट को फिर से पाता हूं जब मैं Google: p
Aren

16
यह हमेशा सीमाओं आदि में अंतर के कारण पूर्ण स्थिति को लौटाने के लिए प्रतीत नहीं होता है
टॉम

8
मैं क्रोम का उपयोग कर रहा हूं और offset()उचित शीर्ष समन्वय वापस नहीं करता है। यह दस्तावेज़ में तत्व के शीर्ष समन्वय की तुलना में लगभग 300 पिक्सेल अधिक देता है। क्यों??
SoLoGHoST

1
क्रोम, एफएफ और आईई अलग परिणाम दे रहे हैं :(
रिजवान मुमताज

3
@ ऐरेन मैं हमेशा इसे भूल जाता हूं और आपकी टिप्पणी को हर बार मनोरंजक लगता हूं :)
एलेक्स

197

ध्यान दें कि $(element).offset()आपको दस्तावेज़ के सापेक्ष एक तत्व की स्थिति बताती है । यह ज्यादातर परिस्थितियों में महान काम करता है, लेकिन आप के मामले में position:fixedअप्रत्याशित परिणाम प्राप्त कर सकते हैं।

यदि आपका दस्तावेज़ व्यूपोर्ट से अधिक लंबा है और आपने दस्तावेज़ के नीचे की ओर लंबवत स्क्रॉल किया है, तो आपके position:fixedतत्व का offset()मूल्य आपके द्वारा स्क्रॉल की गई राशि से अपेक्षित मूल्य से अधिक होगा

यदि आप किसी स्थिति पर दस्तावेज़ के बजाय व्यूपोर्ट (विंडो) के सापेक्ष मान की तलाश कर रहे हैं : निश्चित तत्व, तो आप दस्तावेज़ के scrollTop()मूल्य को निर्धारित तत्व के offset().topमूल्य से घटा सकते हैं । उदाहरण:$("#el").offset().top - $(document).scrollTop()

यदि position:fixedतत्व का ऑफसेट अभिभावक दस्तावेज़ है , तो आप parseInt($.css('top'))इसके बजाय पढ़ना चाहते हैं ।


8
मैं बिल्कुल इसके लिए देख रहा था! मेरे जैसे noob के लिए: घटाया जाने वाला मूल्य है$(document).scrollTop()
डॉ। जियानलुइगी ज़ेन ज़नेटिनी

3
बहुत बढ़िया! यह शीर्ष उत्तर होना चाहिए!
शिवांशु गोयल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.