原创

使用 jQuery 当滚动到页面的底部/页尾弹出 DIV

当滚动到页面的底部/页尾弹出 DIV，这个功能性的特效是很有用的，现在的很多网站在用户将要看完内容的时候，会推荐一些其他的文章，就可以做成这样的，当滚动到页面的底部/页尾弹出 DIV。首先我们需要在某个页面的最后位置插入一个 DIV 并设置 ID 为 last：

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

然后我们需要下面的 HTML 的对话框：

<div id="slidebox">
    <a></a>
    <p>More in Technology & Science (4 of 23 articles)</p>
    <h2>The Social Impact of Scientific
        Research and new Technologies</h2>
    <a>Read More »</a>
</div>

与类 close 会给用户可以选择关闭此对话框，它会不会再次出现。我们将对话框设置成简报的一种风格：

#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;
}

我们给这个对话框设置固定的位置，刚开始是隐藏的，该框将有一个不错的CSS3盒阴影：

#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(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;
}

现在让我们添加一些 JavaScript 的效果，首先我们需要引入 jQuery 库：

<script src="js/jquery.min.js"></script>

当时当用户滑动页面的时候，我们就需要计算用户是否滑动到了页面的底部：然后我们将增加两个功能。一是以确定我们是否达到触发元件，同时滚动和使框滑出如果是的话。其他功能使得在小十字收盘时，点击该框消失。包含 jQuery 库之后和身体结束标记之前添加此：

$(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();
    });
});

点击这里查看示例：http://run.wenjiangs.com/code/#/?code=CTcCg938

正文到此结束