jquery – 我需要找到元素和浏览器窗口底部之间的距离

我需要找到元素和浏览器窗口底部的距离.

当我选择元素,元素和浏览器窗口底部之间的距离小于50px时,我想使窗口自动滚动.

有任何想法吗？我更喜欢使用jQuery.

解决方法

与其他系统不同,浏览器中的坐标是从上到下,这意味着浏览器的顶部是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';
    }
};

Fiddle