জাভাস্ক্রিপ্ট সহ একটি ডিভের শীর্ষ থেকে উইন্ডোর শীর্ষে দূরত্ব নির্ধারণ করুন

Question

বর্তমান স্ক্রিনের শীর্ষে কোনও ডিভের একেবারে শীর্ষের মধ্যে দূরত্বটি কীভাবে নির্ধারণ করব? আমি কেবল পিক্সেল দূরত্বটি বর্তমান পর্দার শীর্ষে চাই, নথির শীর্ষে নয়। আমি এর মতো কয়েকটি জিনিস চেষ্টা করেছি .offset()এবং .offsetHeightআমি কেবল আমার মস্তিষ্ককে এটি ঘিরে রাখতে পারি না। ধন্যবাদ!

Comments

আপনি এটি পরীক্ষা করে

— জোসেফ

el.getBoundingClientRect().top+window.scrollY

— কর্ক করুন

@ কাউব এহ, ঠিক আছে el.getBoundingClientRect().top। স্ক্রোল অবস্থান যুক্ত করা নথির শীর্ষে দূরত্বটি যুক্ত করে। বিকাশকারী.মোজিলা.আর.জি.ডি

— ডকস /

হ্যাঁ ঠিক আছে, স্রেফ অসমর্থিত হতে চেয়েছিলেন

— কাউব

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 দূরে থাকে

— থেসা ভারব্রুগেন

@ থেসাবার্গর্গেন আপনি distanceভেরিয়েবলটি পরীক্ষা করতে পারেন এটির মান আছে কিনা তা দেখতে 120তবে আমি একটি সঠিক সংখ্যার পরিবর্তে একটি পরিসর পরীক্ষা করার পরামর্শ দিচ্ছি। উদাহরণ হিসেবে বলা যায় আপনি একটি মাউস-চাকা সঙ্গে স্ক্রল, আপনি খুব ভাল 120. সুতরাং উপর লাফালাফি আপনি যখন উপাদান শীর্ষ ধা র 120 পিক্সেস বা তার মধ্যে কিছু সিএসএস বা কিছু আবেদন করার চেষ্টা করছেন পারে, তাহলে হয়ত ব্যবহার if (distance < 120) { /* do something */}। এখানে একটি আপডেটড

— জ্যাস্পার

আমি যদি এটি করি তবে একটি সমস্যা: আমি যখন স্ক্রোল করব তখন স্টিকি অংশটি ফ্ল্যাশ হয়। আমার ধারণা, কারণ আমি যখন স্ক্রোল করব তখন এটি পুনরায় গণনা করে। কোন ধারনা কিভাবে এটা ঠিক করতে হবে? আমার কোড: $ (উইন্ডো) .অন ('স্ক্রোল', ফাংশন () {var স্ক্রোলটপ = $ (উইন্ডো) .স্ক্রোলটপ (), এলিমেন্টঅফসেট = $ ('# গৌণ')। অফসেট () শীর্ষ, দূরত্ব = (এলিমেন্ট অফসেট) - স্ক্রোলটপ); যদি (দূরত্ব <120) {$ ('# গৌণ') add addClass ('স্টিকি');} অন্য {$ ('# গৌণ')। সরানো ক্লাস ('স্টিকি');}});

— থেসা ভারব্রুগেন

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

— y

@ টিপি ওপেনটি নথির শীর্ষে নয়, পর্দার শীর্ষের দূরত্বটি সন্ধান করছে - এক নেতিবাচক মান এই ক্ষেত্রে বৈধ হবে

— ড্রেনাই

Answer 3

এটি জাভাস্ক্রিপ্টের মাধ্যমে খাঁটিভাবে অর্জন করা যেতে পারে ।

আমি দেখতে পেয়েছি যে উত্তরটি আমি লিখতে চেয়েছিলাম তার প্রশ্নের উত্তরটি লিংক দ্বারা দেওয়া হয়েছে ।

তবে আমি যাইহোক উত্তর লিখতে যাচ্ছি কারণ আমার মতো, লোকেরা মাঝে মাঝে মন্তব্যগুলি পড়তে ভুলে যায়।

সুতরাং, আপনি যদি আপনার স্ক্রিন উইন্ডোর শীর্ষ থেকে কোনও উপাদানটির দূরত্ব (পিক্সেলগুলিতে) পেতে চান তবে আপনার যা করা দরকার তা এখানে:

// 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

@ এলনূর এই পরামর্শের জন্য আপনাকে ধন্যবাদ :) আমি উপযুক্ত পরিবর্তন করেছি।

— ফুরকান রাহমথ

মাত্র দুর্দান্ত কাজ @ মোহাম্মদফুরকানরাহমথএম। আপনার উত্তরের জন্য আপনাকে অনেক ধন্যবাদ :) এটি একটি কবজ মত কাজ করে !! :)

— মেরিয়ানোস নিকোস

@ মেরিয়ানোনিকোস আপনাকে ধন্যবাদ আমি আনন্দিত যে এটি সাহায্য করেছিল :)

— ফুরকান রাহামথ

তবে এটি কেবল তখনই কাজ করবে যদি আপনি ঠিক পৃষ্ঠার মাঝখানে পুনরায় লোড না করেছেন?

— সেগিভ এসইও

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.অফসেটটপ বিদ্যমান। এলিমেন্ট.জেটবাউন্ডিংক্লায়েন্টরেক্ট ()। শীর্ষটি আমাকে অদ্ভুত আচরণ দিচ্ছে। আমি ওয়েবপৃষ্ঠার শীর্ষ থেকে এলিমেন্টের শীর্ষ পর্যন্ত দূরত্ব পেতে চাইছিলাম।

— alexandre1985

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');
}
});