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

 

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