blocks|key|396058|text|您可以使用.offset()来获取与document元素相比的偏移量，然后使用window元素的scrollTop属性来确定用户滚动了页面的深度：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|396059|var+scrollTop+++++=+$(window).scrollTop(),
++++elementOffset+=+$('#my-element').offset().top,
++++distance++++++=+(elementOffset+-+scrollTop);|code-block|syntax|javascript|396060|distance变量现在保存到#my-element元素顶部和顶部折叠的距离。|396061|这是一个演示：http://jsfiddle.net/Rxs2m/|396062|请注意，负值表示元素位于顶部折叠之上。|396063|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Rxs2m/^0|5|9|I|8|13|6|1C|9|0|0|0|8|F|B|0|7|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

You can use <code>.offset()</code> to get the offset compared to the <code>document</code> element and then use the <code>scrollTop</code> property of the <code>window</code> element to find how far down the page the user has scrolled:

<pre><code>var scrollTop = $(window).scrollTop(),
 elementOffset = $('#my-element').offset().top,
 distance = (elementOffset - scrollTop);
</code></pre>

The <code>distance</code> variable now holds the distance from the top of the <code>#my-element</code> element and the top-fold.

Here is a demo: <a href="http://jsfiddle.net/Rxs2m/" rel="noreferrer">http://jsfiddle.net/Rxs2m/</a>

Note that negative values mean that the element is above the top-fold.

blocks|key|612107|text|我使用了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|612108|++++++++++++++++++++++++++++++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|code-block|syntax|javascript|612109|代码：|612110|function+Get_Offset_From_Start+(object,+offset)+{+
++++offset+=+offset+%7C%7C+{x+:+0,+y+:+0};
++++offset.x+%2B=+object.offsetLeft;+++++++offset.y+%2B=+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+%7C%7C+{x+:+0,+y+:+0};
++++scrolled.x+%2B=+object.scrollLeft;++++scrolled.y+%2B=+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);
++++});
++++*/|612111|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I used this:

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

code:

<pre><code>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" &amp;&amp; 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);
 });
 */
</code></pre>

blocks|key|612165|text|香草：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|612166|window.addEventListener('scroll',+function(ev)+{

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

+++console.log(distanceToTop);
});|code-block|syntax|javascript|612167|打开浏览器控制台，滚动页面查看距离。|612168|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Vanilla:

<pre><code>window.addEventListener('scroll', function(ev) {

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

 console.log(distanceToTop);
});
</code></pre>

Open your browser console and scroll your page to see the distance.

blocks|key|612194|text|我使用此函数来检测元素在视口中是否可见|type|unstyled|depth|inlineStyleRanges|entityRanges|data|612195|代码：|612196|const+vh+=+Math.max(document.documentElement.clientHeight+%7C%7C+0,+window.innerHeight+%7C%7C+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');
}
});|code-block|syntax|javascript|612197|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I used this function to detect if the element is visible in view port

Code:

<pre><code>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 &lt; vh){
 console.log('in view');
}
else{
 console.log('not in view');
}
});
</code></pre>

How do I determine the distance between the very top of a div to the top of the current screen? I just want the pixel distance to the top of the current screen, not the top of the document. I've tried a few things like <code>.offset()</code> and <code>.offsetHeight</code>, but I just can't wrap my brain around it. Thanks!

Determine distance from the top of a div to top of window with javascript

如何确定div的顶部到当前屏幕顶部之间的距离？我只需要当前屏幕顶部的像素距离，而不是文档顶部的像素距离。我尝试过像.offset()和.offsetHeight这样的东西，但我就是想不通。谢谢!

问使用javascript确定div顶部到窗口顶部的距离
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript确定div顶部到窗口顶部的距离EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript确定div顶部到窗口顶部的距离
EN