Данная панель выдвигается только после того как будет достигнут определённый элемент при прокрутке страницы. В данном случае это
1. CSS
#slidebox{
width: 728px;
height: 90px;
margin-left: 50%;
left: -369px;
background-color: #fff;
border-top: 1px solid #E28409;
border-right: 1px solid #E28409;
border-left: 1px solid #E28409;
position: fixed;
bottom: -105px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
a.close{
background: transparent url(close.gif) no-repeat top left;
width: 13px;
height: 13px;
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
z-index: 10;
}
a.close:hover{
background-position: 0px -13px;
}
2. Подключение jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
3. JavaScript
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var distanceTop = $('#show').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'bottom':'0px'},300);
else
$('#slidebox').stop(true).animate({'bottom':'-105px'},200);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
4. HTML
<div id="slidebox">
<a class="close"></a>
</div>
5. Вызывающий элемент
<div id="show"></div>
6. Изображение