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

用户打开我的网站时，我的屏幕上有一个信息框（div）。一旦用户向下滚动并且该框不再对用户可见，我希望该框在滚动时始终显示在右上角。

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

谢谢！

最佳答案

您需要使用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 = '';
    }
}

Here's a demo。

关于javascript - 向下滚动后，一旦不再显示DIV，是否总是显示它？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16441226/