CSS/Javascript를 통한 오른쪽 하단 오버레이

Question

NY Times는 비슷한 스토리에 대한 링크를 제공하는 화면의 오른쪽 하단에 오버레이 팝업을 사용했습니다.이 작업을 수행하는 가장 좋은 방법은 무엇인지 궁금합니다. 숨겨진 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 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)