频道栏目
首页 > 资讯 > JavaScript > 正文

Jquery实现简单的滚动刷新效果

16-12-06        来源:[db:作者]  
收藏   我要投稿

Jquery实现简单的滚动刷新效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
    <title>滚动刷新效果</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(window).scroll(function() {
                //$(document).scrollTop() 获取垂直滚动的距离:最小值为0,最大值:文档高度-可视化窗口高度
                //$(document).scrollLeft() 这是获取水平滚动条的距离
 
                console.log("垂直滚动条位置:"+$(document).scrollTop()+"--"+$(window).height());
 
                if ($(document).scrollTop() <= 0) {
                    console.log("滚动条已经到达顶部为0");
                }
 
                /**
                 *$(document).height():文档的高度
                 *$(window).height():可视域的高度:窗口的大小:根据浏览窗口的大小变化
                 *判断底部:文档高度<=滚动条垂直高度+可视窗口的高度
                 * */
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    console.log("滚动条已经到达底部为" + $(document).scrollTop());
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

这里写图片描述

相关TAG标签
上一篇:block,inline和inline-block概念和区别
下一篇:Javascript的面对对象的理解(prototype,函数和对象等概念)
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站