首页
话题
消息
手册
我的

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

发布于 2018-04-06 字数 2794 浏览 1396 评论 0

当滚动到页面的底部/页尾弹出 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

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!