Question

“纽约时报”曾经在屏幕右下角弹出一个叠加层，提供类似故事的链接等等。我想知道这样做的最佳方法是什么？你有一个隐藏的div并在Javascript中经过一段时间后激活它吗？

Answer 1

你从隐藏的div开始，绝对定位：

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

CSS：

.bottomMsg {
   width:100px;  
   bottom:0px;
   right:100px;
   position:absolute; 
}

JS：我在这里使用jQuery获得了很好的淡入效果。计时器使用毫秒4000 = 4秒。

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

Answer 2

延迟可行，但大多数使用此类界面的新闻网站将其与滚动位置联系起来 - 当您靠近底部时，会显示该元素。使用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 = '';
}

通过CSS / Javascript进行右下方叠加

2 个答案: