javascript - 向下滚动后，一旦不再可见，总是显示 DIV？

Question

当用户打开我的网站时，我的屏幕上有一个信息框 (div)。一旦用户向下滚动并且该框不再对用户可见，我希望该框在滚动时一直出现在右上角。

我知道如何让它一直可见（位置：固定）。问题是，我怎么知道滚动时它何时对用户不可见？如果有帮助，我也可以使用 JavaScript。我更喜欢原型 JS。

谢谢！

Answer 1

您需要使用getBoundingClientRect()，它返回元素相对于视口的位置。如果该top值低于0，那么它应该是固定的。

HTML：

<div id="stick">
    I should be fixed… sometimes
</div>

CSS：

#stick {
    position: absolute;
    top: 60px;
}

#stick.fixed {
    position: fixed;
    top: 0;
}

JS：

var stick = document.getElementById('stick');

window.onscroll = function(){
    if(stick.getBoundingClientRect().top < 0){
        stick.className = 'fixed';
    } else if(stick.className.indexOf('fixed') < 0){
        stick.className = '';
    }
}

这是一个演示。