popup sliding inwords from bottom right on page scroll down

Question

I would like to have a popup emerging from bottom right once user has scrolled down the page completely. The popup can have read more links or related content links.

I am using jquery framework library and php. I want the popup to have dynamic contents.

This is what I am referring to:

http://economictimes.indiatimes.com/news/economy/finance/Finance-Minister-P-Chidambaram-holds-meeting-with-officials-over-rupee-fall/articleshow/20676682.cms

Eg:
Page Data
Page Data
Page Data
Page Data
Page Data
Page Data
Page Data
Page Data
Page Data
On scroll till here <-----------Popup window from right to left.------

Please guide me on how to do the same.

Answer 1

Html Code:

Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>Some data
<br>
<div style="display: none;" id="slideout"> <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">(X)</a>  <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Some More Data</span>

    <br />
    <div style="float:left; margin:15px;">llllllllllllll</div>
    <div style="float:left; margin:15px;">lllllllllllllll</div>
</div>
<div class='clear'></div>

JS code:

$(window).scroll(function () {
    if ($(document).scrollTop() >= $(document).height() / 4) $("#slideout").show("slow");
    else $("#slideout").hide("slow");
});

CSS Code:

#slideout {
    background:#f3f3f3;
    border-radius:9px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -moz-box-shadow:inset 0 0 4px #333;
    -webkit-box-shadow:inset 0 0 4px #333;
    box-shadow:inner 0 0 3px #333;
    padding:12px 14px 12px 14px;
    width:300px;
    position:fixed;
    bottom:13px;
    right:2px;
    display:none;
    z-index:3;
    height:65px;
}

http://jsfiddle.net/fakhruddin/4TrV6/