HTML
<div style="right: 0px;" id="slidebox">
<a class="close"></a>
<p>More in Technology & Science (4 of 23 articles)</p>
<h2>The Social Impact of Scientific Research and new Technologies</h2>
<a class="more">Read More »</a>
</div>
CSS
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div style="right: 0px;" id="slidebox">
<a class="close"></a>
<p>More in Technology & Science (4 of 23 articles)</p>
<h2>The Social Impact of Scientific Research and new Technologies</h2>
<a class="more">Read More »</a>
</div>
CSS
#slidebox{width:400px;height:100px;padding:10px;background-color:#fff;
border-top:3px solid #E28409;position:fixed;bottom:0px;right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;}
#slidebox p, a.more{font-size:11px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;}
a.more{
cursor:pointer;
color:#E28409;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#E28409;
font-size:18px;
margin:10px 20px 10px 0px;
}
a.close{
background:transparent url(../images/close.gif) no-repeat top left;
width:13px;
height:13px;
position:absolute;
cursor:pointer;
top:10px;
right:10px;
}
a.close:hover{
background-position:0px -13px;
}SCRIPT<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>