如何知道div是否固定在底部?

时间:2015-02-12 18:08:26

标签: javascript css

http://jsfiddle.net/juveo1d7/

有没有可靠的方法通过设置其底部属性或其顶级属性来确定是否定位了固定div?

我最好的选择是getComputedStyle并认为我会知道div是否通过查看其顶级属性被“剪切”到底部(如果它没有设置然后div被剪切到底部)但即使我不设置top属性,它仍然返回一个像素值。

一个简单的div

<div id="fixed"></div>

css

#fixed {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: red;
}

和javascript

var fixed = document.getElementById('fixed');
var position = window.getComputedStyle(fixed).position;
var top = window.getComputedStyle(fixed).top;
var bottom = window.getComputedStyle(fixed).bottom;

我知道这是一个小的差异,但我需要仅使用javascript在另一个div上重现相同的行为。

1 个答案:

答案 0 :(得分:0)

好的,我得到了解决方案。

top属性仅返回Firefox中的像素值,因为getComputedStyle对某些属性的作用略有不同,并返回使用的值而不是已解析的值。要获取firefox中top属性的已解析值,我们需要使用getDefaultComputedStyle,它只存在于Firefox中(自ff19起)。

var top = window.getComputedStyle(fixed).top;        // returns value in px   
var top = window.getDefaultComputedStyle(fixed).top; // returns auto