<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<style type="text/css">

			* {

				margin: 0px;

				padding: 0px;

			}

			body {

				position: relative;

				width: 100%;

			}

			div#fixd {

				position: fixed;

				top: 0px;

				left: 0px;

				height: 100px;

				width: 100%;

				background: red;

				z-index: 10;

			}

			div#main {

				z-index: 1;

				width: 100%;

				height: 2000px;

				background: green;

			}

		</style>

		<script type="text/javascript">

			$(function() {

				function scroll(fn) {

					var beforeScrollTop = document.body.scrollTop,

					fn = fn || function() {};

					window.addEventListener("scroll", function() {

						var afterScrollTop = document.body.scrollTop,

							delta = afterScrollTop - beforeScrollTop;

						if(delta === 0) return false;

						fn(delta > 0 ? "down" : "up");

						beforeScrollTop = afterScrollTop;

					}, false);

				}

				scroll(function(direction) {

					if(direction=="down"){

						$("#fixd").hide();

					}else{

						$("#fixd").show();

					}

				});

			});

		</script>

	</head>

	<body>

		<div id="fixd">

		</div>

		<div style="height: 100px;

				width: 100%;background: green;">

		</div>

		<div id="main">

			aaaaaaaaaaaaaaaaaaaaaaaa

		</div>

	</body>

</html>

　　

项目背景

webtouch（webapp）页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。

遇到问题

1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！

2、通过上滚下滚来让底部导航显示或者因此，安卓上面的浏览器都可以，但是苹果safari会一闪一闪，原因是苹果safari自动有个弹跳效果，导致事件重复执行，解决办法是给上滚下滚一个距离，滚动到一定距离后返回是上滚还是下滚。

单纯判断滚动条方向

function scroll( fn ) {

    var beforeScrollTop = document.body.scrollTop,

        fn = fn || function() {};

    window.addEventListener("scroll", function() {

        var afterScrollTop = document.body.scrollTop,

            delta = afterScrollTop - beforeScrollTop;

        if( delta === 0 ) return false;

        fn( delta > 0 ? "down" : "up" );

        beforeScrollTop = afterScrollTop;

    }, false);

}

调用方法：

scroll(function(direction) { console.log(direction) });

以上方法手机苹果浏览器事件会跳动，解决方法及代码改进

scrollDirect: function (fn) {

    var beforeScrollTop = document.body.scrollTop;

    fn = fn || function () {

    };

    window.addEventListener("scroll", function (event) {

        event = event || window.event;

        var afterScrollTop = document.body.scrollTop;

        delta = afterScrollTop - beforeScrollTop;

        beforeScrollTop = afterScrollTop;

        var scrollTop = $(this).scrollTop();

        var scrollHeight = $(document).height();

        var windowHeight = $(this).height();

        if (scrollTop + windowHeight > scrollHeight - 10) {  //滚动到底部执行事件

            fn('up');

            return;

        }

        if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {

            fn('up');

        } else {

            if (Math.abs(delta) < 10) {

                return false;

            }

            fn(delta > 0 ? "down" : "up");

        }

    }, false);

}

调用方法：

   var upflag=1;

   var  downflag= 1;

    //scroll滑动,上滑和下滑只执行一次！

scrollDirect(function (direction) {

        if (direction == "down") {

            if (downflag) {

                $(".footer_wrap").slideUp(200);

                downflag = 0;

               upflag = 1;

            }

        }

        if (direction == "up") {

            if (upflag) {

                $(".footer_wrap").slideDown(200);

               downflag = 1;

                upflag = 0;

            }

        }

 });

滚动条滚动到底部和头部判断

其实我上面的函数中已经有判断，下面再列一下！看如下函数！

BottomJumpPage: function () {

            var scrollTop = $(this).scrollTop();

            var scrollHeight = $(document).height();

            var windowHeight = $(this).height();

            if (scrollTop + windowHeight == scrollHeight) {  //滚动到底部执行事件

                    console.dir("我到底部了")；

            }

            if (scrollTop == 0) {  //滚动到头部部执行事件

            console.dir("我到头部了")；

            }

 }

调用方法：

$(window).scroll(BottomJumpPage);

判断div是否滚动到底部

上面的方法是判断滚动轴是否滚动到底部，但是有时候，我们在做滚动加载的时候，有时候也要做某个div是否滚动到底部然后加载。那么如何判断DIV的滚动轴滚动到底部呢？

这个也需要了解几个高度：

1、div的高度 $("#某div").height();

2、滚动轴的高度 $(#某div)[0].scrollHeight

3、滚动轴到div顶部的高度 $(某div)[0].scrollTop;

书写代码如下：

 $(document).ready(function (){

       var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)

       var nScrollTop = 0;   //滚动到的当前位置

       var nDivHight = $("#div1").height();

       $("#div1").scroll(function(){

         nScrollHight = $(this)[0].scrollHeight;

         nScrollTop = $(this)[0].scrollTop;

         if(nScrollTop + nDivHight >= nScrollHight)

           alert("滚动条到底部了");

         });

});

关于是否滚动到页面底部和头部，相关的文章还有http://www.haorooms.com/post/js_jquery_height

理解了这篇文章，是否滚动轴滚到底部和头部就迎刃而解了！

jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部的更多相关文章

  1. jquery判断页面滚动条(scroll)是上滚还是下滚

    单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...

  2. jQuery判断页面滚动条滚动方向

    废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...

  3. jquery让页面滚动条top，滚动条 顶部

    jquery让页面滚动条top,滚动条 顶部$(document).scrollTop(0);

  4. jquery判断div滚动条到底部

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...

  5. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  6. [jquery]判断页面滚动到顶部和底部（适用于手机web加载）

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  7. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  8. jquery判断页面网址是否有效

    方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html><html><head lang="en"> &l ...

  9. jQuery 判断页面元素是否存在

    if ( $("#someID").length > 0 ) {  } 根据JavaScript的经验,尝试用$("#someID") != " ...

随机推荐

  1. poj3241 曼哈顿最小距离生成树第k大的边

    思路: 已知: 要生成曼哈顿距离最小生成树,一个点最多和四周8个点连线,那8个点分别是将那个点四周360度平分成8个区间,每个区间里面和那个点曼哈顿距离最小的点,所以如果有n个点,那么最多有4n条边, ...

  2. spi 子系统

    http://blog.csdn.net/ropenyuan/article/details/42269641 http://blog.chinaunix.net/uid-27406766-id-33 ...

  3. oracle命令

    oracle创建表空间: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执行 2.确保路径存在,比如[D:\oracle\oradata\Oracle9i\]也就是你要 ...

  4. [2015hdu多校联赛补题]hdu5378 Leader in Tree Land

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5378 题意:给你一棵n个结点的有根树.因为是有根树,那么每个结点可以指定以它为根的子树(后面讨论的子树 ...

  5. pip使用

    安装指定版本的插件: pip install -v matplotlib==1.5.1 #安装matplotlib version 1.5.1

  6. mysql 命令行参数

    MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式  例如: mysql -h${HOSTNAME}  -P${PORT}  -u${USERNAM ...

  7. 解决WordPress中无法将上传的文件移动至wp-content/uploads

    搭建lnmp环境,放一个wordpress建站系统 lnmp环境很快就搭建完成了,但是在放wordpress的时候出现了一些问题 最主要的问题: 1.第一个是wp-content/uploads没有权 ...

  8. 6本Android开发必备图书

    学习一样新事物或许有多种方式,报培训班,看视频,向高手请教等等,但一本好书往往可以让你少走很多弯路,事半功倍.今天与大家分享一些Android开发值得一读的书籍,希望对新手安卓开发者们有所帮助. 1. ...

  9. c# (nop中)下拉列表（有外键）

    第一种情况.view视图加载出来时就有值,实现步骤如下 1.在操作的界面Model中建立public List<SelectListItem> xxx(取名){ get; set; } 2 ...

  10. 【转】supervisor安装与配置

    1.安装 宿主机环境:(Centos7) 宿主机环境 #yum install python-setuptools yum install python-setuptools#easy_install ...