通过CSS/Javascript实现右下覆盖

《纽约时报》曾在屏幕右下角弹出一个覆盖图，提供类似故事的链接等。我想知道这样做的最佳方法是什么？您是否有一个隐藏的div，并在Javascript中经过一定时间后激活它？

您从一个隐藏的div开始，绝对定位：

<div class="bottomMsg" stlye="display:none">My stuff!</div>

JS：我在这里使用jQuery是为了获得一个不错的淡入效果。计时器使用毫秒4000=4秒

window.setTimeout(function() {
    $('.bottomMsg').fadeIn('slow')  
},4000)

---

延迟会起作用，但大多数使用这种界面的新闻网站都会将其绑定到滚动位置——当你接近底部时，元素就会显示出来。使用确定用户何时位于屏幕底部的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 = '';
}

---

位置：绝对

与页面相关<代码>位置：已修复与视口相关的（不会滚动出视图）。

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 = '';
}