जावास्क्रिप्ट के साथ खिड़की के शीर्ष पर एक div के शीर्ष से दूरी निर्धारित करें

Question

मैं वर्तमान स्क्रीन के शीर्ष पर div के शीर्ष के बीच की दूरी को कैसे निर्धारित करूं? मैं सिर्फ वर्तमान स्क्रीन के शीर्ष पर पिक्सेल दूरी चाहता हूं, दस्तावेज़ के शीर्ष पर नहीं। मैंने कुछ चीजों की कोशिश की है जैसे .offset()और .offsetHeight, लेकिन मैं अभी इसके चारों ओर अपना दिमाग नहीं लपेट सकता। धन्यवाद!

Comments

आप के लिए चाहते हो सकता है इस की जाँच

— यूसुफ

el.getBoundingClientRect().top+window.scrollY

— caub

@ इब एह, बस el.getBoundingClientRect().top। स्क्रॉल स्थिति को जोड़ने से दस्तावेज़ के शीर्ष पर दूरी तक जुड़ जाता है। developer.mozilla.org/de/docs/Web/API/Element/…

— lynx

हाँ, ठीक है, बस unjquerify करना चाहता था

— caub

Answer 1

आप तत्व .offset()की तुलना में ऑफसेट प्राप्त करने के लिए उपयोग कर सकते हैं documentऔर फिर उपयोगकर्ता द्वारा स्क्रॉल किए गए पृष्ठ से कितनी दूर है यह जानने scrollTopके लिए windowतत्व की संपत्ति का उपयोग करें :

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

distanceचर अब के ऊपर से दूरी रखती #my-elementतत्व और शीर्ष गुना।

यहाँ एक डेमो है: http://jsfiddle.net/Rxs2m/

ध्यान दें कि नकारात्मक मानों का मतलब है कि तत्व शीर्ष-गुना से ऊपर है।

Comments

यदि दूरी एक विशिष्ट संख्या है तो मैं कैसे जांच सकता हूं? मैं एक तत्व को चिपचिपा बनाना चाहता हूं अगर वह ऊपर से 120px दूर है

— थिसारा वर्ब्रुगेन

@ThessaVerbruggen आप distanceचर को देख सकते हैं कि क्या यह मान है, 120लेकिन मैं एक सटीक संख्या के बजाय एक सीमा के लिए जाँच करने की सलाह दूंगा । उदाहरण के लिए यदि आप माउस-व्हील के साथ स्क्रॉल करते हैं, तो आप 120 से अधिक अच्छी तरह से छोड़ सकते हैं। इसलिए यदि आप कुछ सीएसएस या कुछ और लागू करने का प्रयास कर रहे हैं, जब तत्व शीर्ष-गुना के 120px के भीतर है, तो शायद उपयोग करें if (distance < 120) { /* do something */}। यहाँ एक अद्यतन डेमो है: jsfiddle.net/na5qL91o

— जैस्पर

एक समस्या अगर मैं ऐसा करता हूं: जब मैं स्क्रॉल करता हूं तो चिपचिपा भाग चमकता है। मैं अनुमान लगाता हूं क्योंकि जब मैं स्क्रॉल करता हूं तो यह पुनर्गणना करता है। इसे ठीक करने के लिए कोई भी विचार? मेरा कोड: $ (विंडो) .on ('स्क्रॉल', फंक्शन () {var स्क्रॉलटॉप = $ (विंडो) .scrollTop (), एलिमेंटऑफसेट = $ ('# सेकंडरी')। ऑफसेट ()। टॉप, डिस्टेंस = एलिमेंटऑफसेट। - स्क्रॉलटॉप); यदि (दूरी <120) {$ ('# माध्यमिक')। AddClass ('चिपचिपा');} और {$ ('# माध्यमिक')। RemoveClass ('चिपचिपा');}})।

— थेरेसा वर्ब्रुगेन

Answer 2

वनीला:

window.addEventListener('scroll', function(ev) {

   var someDiv = document.getElementById('someDiv');
   var distanceToTop = someDiv.getBoundingClientRect().top;

   console.log(distanceToTop);
});

दूरी देखने के लिए अपना ब्राउज़र कंसोल खोलें और अपने पृष्ठ को स्क्रॉल करें।

Comments

यह केवल तभी काम करता है जब उपयोगकर्ता ने पृष्ठ को स्क्रॉल नहीं किया हो। अन्यथा distanceToTopलौटाया गया सापेक्ष है (यदि उपयोगकर्ता ने पिछले स्क्रॉल किया है तो भी नकारात्मक हो सकता है)। इसे ध्यान में रखने के लिए, उपयोग करेंwindow.pageYOffset + someDiv.getBoundingClientRect().top

— ty।

@ ओटी स्क्रीन के शीर्ष पर दूरी की तलाश कर रहा है, दस्तावेज़ के शीर्ष पर नहीं - इस मामले में एक नकारात्मक मूल्य मान्य होगा

— Drenai

Answer 3

यह जावास्क्रिप्ट के साथ पूरी तरह से प्राप्त किया जा सकता है ।

मुझे लगता है कि मैं जो उत्तर लिखना चाहता था, उसका उत्तर lynx ने टिप्पणी में दिया है।

लेकिन मैं वैसे भी जवाब लिखने जा रहा हूं क्योंकि मेरी तरह ही, लोग कभी-कभी टिप्पणियों को पढ़ना भूल जाते हैं।

इसलिए, यदि आप अपनी स्क्रीन विंडो के ऊपर से एक तत्व की दूरी (पिक्सेल में) प्राप्त करना चाहते हैं, तो यहां आपको यह करना होगा:

// Fetch the element
var el = document.getElementById("someElement");  

getBoundingClientRect () का उपयोग करें

// Use the 'top' property of 'getBoundingClientRect()' to get the distance from top
var distanceFromTop = el.getBoundingClientRect().top; 

बस!

आशा है कि यह किसी की मदद करता है :)

Comments

getBoundingClient () काम नहीं करता, इसके बजाय .getBoundingClientRect ()

— Elnoor

@Elnoor सुझाव के लिए धन्यवाद :) मैंने उचित बदलाव किए हैं।

— फुरकान रहमथ

बस कमाल का काम है @MohammedFurqanRahamathM आपके उत्तर के लिए बहुत बहुत धन्यवाद :) यह एक आकर्षण की तरह काम करता है !! :)

— मेरियनोस निकोस

@MerianosNikos धन्यवाद। मुझे खुशी है कि यह मदद की थी :)

— फुरकान रहमथ

लेकिन यह केवल तभी काम करेगा जब आप पृष्ठ के ठीक मध्य में पुनः लोड नहीं किए गए हों?

— सगिव एसईओ

Answer 4

मैंने इसका उपयोग किया:

                              myElement = document.getElemenById("xyz");
Get_Offset_From_Start       ( myElement );  // returns positions from website's start position
Get_Offset_From_CurrentView ( myElement );  // returns positions from current scrolled view's TOP and LEFT

कोड:

function Get_Offset_From_Start (object, offset) { 
    offset = offset || {x : 0, y : 0};
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    if(object.offsetParent) {
        offset = Get_Offset_From_Start (object.offsetParent, offset);
    }
    return offset;
}

function Get_Offset_From_CurrentView (myElement) {
    if (!myElement) return;
    var offset = Get_Offset_From_Start (myElement);
    var scrolled = GetScrolled (myElement.parentNode);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
//helper
function GetScrolled (object, scrolled) {
    scrolled = scrolled || {x : 0, y : 0};
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html" && object.parentNode) { scrolled=GetScrolled (object.parentNode, scrolled); }
    return scrolled;
}

    /*
    // live monitoring
    window.addEventListener('scroll', function (evt) {
        var Positionsss =  Get_Offset_From_CurrentView(myElement);  
        console.log(Positionsss);
    });
    */

Comments

उस एलिमेंट को दिखाने के लिए +1 .offsetTop मौजूद है। element.getBoundingClientRect ()। शीर्ष मुझे अजीब व्यवहार दे रहा है। मैं तत्व के शीर्ष तक वेबपृष्ठ के शीर्ष से दूरी प्राप्त करना चाह रहा था।

— अलेक्जेंड्रे

Answer 5

इस फ़ंक्शन का मैंने यह पता लगाने के लिए उपयोग किया कि क्या तत्व पोर्ट में दिखाई दे रहा है

कोड:

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
$(window).scroll(function(){
var scrollTop     = $(window).scrollTop(),
elementOffset = $('.for-scroll').offset().top,
distance      = (elementOffset - scrollTop);
if(distance < vh){
    console.log('in view');
}
else{
    console.log('not in view');
}
});