Slidebox kesamping

Slidebox kesamping

HTML
<div style="right: 0px;" id="slidebox">
            <a class="close"></a>
            <p>More in Technology &amp; 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>