<!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. 循序渐进Python3（三） -- 0 -- 初识函数

    函数 如果我们要计算一个圆的面积,就需要知道它的半径,然后根据公式S=3.14*r*r算出它的面积,如果我们要算100个圆的面积,则每次我们都需要写公式去计算,是不是很麻烦,但是有了函数的话,我们就不 ...

  2. ubuntu 14 配置JDK

    1. 下载JDK http://www.oracle.com/technetwork/cn/java/javase/downloads/index.html 下载后的保存地址: /home/root1 ...

  3. CommonUtils

    package com.utils; import java.lang.reflect.Field; import java.math.BigDecimal; import java.sql.Time ...

  4. C#与时间有关的一些方法

    stopWatch  var stopWatch = new StopWatch();   //创建一个Stopwatch实例 stopWatch.Start();   //开始计时 stopWatc ...

  5. (六) 一起学 Unix 环境高级编程 (APUE) 之 进程控制

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  6. golang--gopher北京大会(2)(rework)

    三.七牛老许 qlang: github qiniu/qlang microservice architecture: http://martinfowler.com/articles/microse ...

  7. Python环境下NIPIR(ICTCLAS2014)中文分词系统使用攻略

    一.安装 官方链接:http://pynlpir.readthedocs.org/en/latest/installation.html 官方网页中介绍了几种安装方法,大家根据个人需要,自行参考!我采 ...

  8. C#中不同的线程对控件的更改

    .net 不允许跨线程个性其它线程创建的控件. 要想实现这个功能就需要用 InvokeRequired 检查是不是由该线程创建的控件,如果是直接操作,如果不是则 用Invoke 添加一个委托再加上参数 ...

  9. Xshell快捷键

    Ctrl + L     清除工作区的内容

  10. C++进阶 面向对象基础(三)

    类的的定义: 初始化一般建议使用构造函数初始化列表形式: Person(const string nm, const string addr):name(nm), address(addr){} th ...