通過CSS/Javascript底部右覆蓋

Question

紐約時報用於在屏幕的右下方彈出一個覆蓋圖，它將提供類似故事的鏈接等。我想知道做這件事的最佳方法是什麼？你有一個隱藏的div，並在Javascript中激活了一段時間後？

Answer 1

延遲會的工作，但使用這種類型的接口把它綁滾動位置的大多數新聞網站 - 當你接近底部，顯示的元素。使用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 = ''; 
} 

Answer 2

你有一個隱藏的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)