使用javascript确定div顶部到窗口顶部的距离
如何确定div顶部到当前屏幕顶部之间的距离？ 我只想将像素距离设置为当前屏幕的顶部，而不是文档的顶部。 我已经尝试了一些像.offset()和.offsetHeight这样的东西，但是我无法把我的大脑包裹起来。 谢谢！
您可以使用.offset()获取与document元素相比较的偏移量，然后使用window元素的scrollTop属性来查找用户滚动页面的距离：
var scrollTop = $(window).scrollTop(), elementOffset = $('#my-element').offset().top, distance = (elementOffset - scrollTop);
distancevariables现在保存了#my-element元素的顶部和顶部的距离。
这里是一个演示： http : //jsfiddle.net/Rxs2m/
请注意，负值表示该元素在顶部之上。
香草：
window.addEventListener('scroll', function(ev) { var someDiv = document.getElementById('someDiv'); var distanceToTop = someDiv.getBoundingClientRect().top; console.log(distanceToTop); });
打开浏览器控制台并滚动页面查看距离。
我发现这个：
<script type="text/javascript"> var myyElement = document.getElementById("myyy_bar"); //your element var EnableConsoleLOGS = true; //to check the results in Browser's Inspector(Console), whenever you are scrolling // ============================================== window.addEventListener('scroll', function (evt) { var Positionsss = GetTopLeft (); if (EnableConsoleLOGS) { console.log(Positionsss); } }); function GetOffset (object, offset) { if (!object) return; offset.x += object.offsetLeft; offset.y += object.offsetTop; GetOffset (object.offsetParent, offset); } function GetScrolled (object, scrolled) { if (!object) return; scrolled.x += object.scrollLeft; scrolled.y += object.scrollTop; if (object.tagName.toLowerCase () != "html") { GetScrolled (object.parentNode, scrolled); } } function GetTopLeft () { var offset = {x : 0, y : 0}; GetOffset (myyElement, offset); var scrolled = {x : 0, y : 0}; GetScrolled (myyElement.parentNode, scrolled); var posX = offset.x - scrolled.x; var posY = offset.y - scrolled.y; return {lefttt: posX , toppp: posY }; } // ============================================== </script>
