javascript - 通过CSS/Javascript底部右上覆盖

纽约时报曾经在屏幕的右下方弹出一个叠加层，该叠加层将提供类似故事的链接等。我想知道这样做的最佳方法是什么？您是否有隐藏的div，并在使用Javascript一定时间后将其激活？

最佳答案

可以进行延迟，但是使用此类型界面的大多数新闻站点会将其绑定到滚动位置-当您靠近底部时，将显示该元素。使用window's scroll event确定用户何时位于屏幕底部的x％之内，然后将div设置为动画。

真的，非常简单又肮脏：

window.onscroll = function {
   var D = document;
   var height = Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );

    var pos = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

   if (pos / height > .8)
     document.getElementById('bottom_popover').style.display = '';
}