解决方法
与其他系统不同,浏览器中的坐标是从上到下,这意味着浏览器的顶部是y = 0.
有两个DOM元素属性用于获取页面上元素的位置.属性是element.offsetTop和element.offsetHeight
您可以通过计算element.offsetTop和window.innerHeight来计算元素和页面底部之间的空间.
var space = window.innerHeight - element.offsetTop
如果要计算元素底部和窗口底部之间的空间,那么您还需要添加元素高度.
var space = window.innerHeight - element.offsetTop + element.offsetHeight
这个计算有时是必要的.认为您有基于百分比的定位,并且想要通过像素知道元素的位置来做某事.例如,你有一个这样的位置:
div{ width:300px; height:16.2%; position:absolute; top: 48.11%; border:3px dotted black; }
那么你想知道div在什么时候靠近浏览器窗口来改变它的颜色:
var div = document.querySelector('div'),space = innerHeight - div.offsetTop + div.offsetHeight; window.onresize = function(){ space = innerHeight - div.offsetTop + div.offsetHeight; if(space < 200){ div.style.background = 'blue'; } };
原文地址:https://www.jb51.cc/jquery/176762.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。