页面滑到底端弹出提示表单

 

<p id="last">
    Some paragraph text
</p>

<div 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>

 

#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 h 2 {

     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 type="text/javascript">
$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();
 
        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100);
    });
 
    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});
</script>