<!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. Aborting commit: 'XXX' remains in conflict

    Aborting commit: 'XXX' remains in conflict 错误   本地也删除了一个文件夹,用svn 的repo-brower 删除了服务器上的对应的文件夹 ,再次comm ...

  2. ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆AnalyzerTool分词工具.非常实用!

    AnalyzerTool分词工具.非常实用! 可以查看某串字符最终被分割成什么样子,这样便于查询时深刻明白为什么有的查不到有的却能查到. package com.isoftstone.www.tool ...

  3. Prim算法和Kruskal算法（图论中的最小生成树算法）

    最小生成树在一个图中可以有多个,但是如果一个图中边的权值互不相同的话,那么最小生成树只可能存在一个,用反证法很容易就证明出来了. 当然最小生成树也是一个图中包含所有节点的权值和最低的子图. 在一个图中 ...

  4. python学习之——爬取网页信息

    爬取网页信息 说明:正则表达式有待学习,之后完善此功能 #encoding=utf-8 import urllib import re import os #获取网络数据到指定文件 def getHt ...

  5. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

  6. Phone Gap [error] cmd: Command failed with exit code 1

    下投票 我不知道如何解决这个问题,但尝试了这一点,将解决肯定. 这是由于ANT工具找不到的tools.jar在JRE lib目录下.当我从复制的tools.jar JDK的lib目录下,以JRE li ...

  7. 2015/09/09夜晚js继续学习

    单词:标量(scalar)数组(array)元素(element)填充(populating)下标(index) 向数组中添加元素的操作称之填充.在填充数组时,不仅需要给出新元素的值,还需要给新元素在 ...

  8. Oracle primary,unique,foreign 区别，Hibernate 关联映射

    Oracle primary,unique,foreign 区别 转:http://www.cnblogs.com/henw/archive/2012/08/15/2639510.html NOT N ...

  9. 组合（composition）与继承（inheritance）

    c++中一个重要的特点就是代码的重用,为了代码重用,有两个非常重要的手段,一个是继承,一个是组合 上面两种类的关系就分别是继承和组合.下面我们看一下代码示例: #ifndef USEFUL_H #de ...

  10. [PHP] php实现文件下载

    1. 设置超链接的href属性 <a href="文件地址"></a> 如果浏览器不能解析该文件,浏览器会自动下载.而如果文件是图片或者txt,会直接在浏览 ...