<!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. 使用CocoaPods配置工程

    1.首先搭建环境,配置CocoaPods,具体请参考 http://code4app.com/article/cocoapods-install-usage 2.打开终端,输入 cd 空格 把工程拖入 ...

  2. asp.net GDI+把图片绘制成自定义的椭圆形状

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. 2015年毕业生收到的offer和薪资透露

    个人情况:全国排名70多的大学,非211,计算机专业硕士 收到的offer: 苏州同程旅游--6k/月 ,自己要了这么多,就给了这么多,没有规范.苏州蜗牛科技--8k/月 ,给了个口头offer,要去 ...

  4. java文件乱码

    要让一个 Java 源文件打开时编码格式为 UTF-8,需要做2件事情:1)设置Java 源文件的默认编码格式为UTF-8:2)设置workspace的编码格式为UTF-8. 相应设置如下: 设置 J ...

  5. Z Fighting Problem

    Here is a video about unity depth shader workarounds: http://www.burgzergarcade.com/tutorials/game-e ...

  6. Eclipse 反编译插件安装jad

    Eclipse的反编译插件一直在用jad,感觉很不错. 刚下了个新版的eclipse,配置jad的时候发现要多设置个东西. 从头开始 环境介绍: eclipse version:Kepler Rele ...

  7. gawk快速入门

    基本定义: gawk 的主要功能是针对文本的每一行执行被指定的 actions. 命令格式: gawk option program file option: -F 指定的分隔符,默认的分隔符是空格, ...

  8. 内置函数 和 select练习3

    19.  查询选修"3-105"课程的成绩高于"109"号同学成绩的所有同学的记录. select * from score where cno='3-105' ...

  9. Frament 方法

    public final boolean isAdded() 如果该Fragment对象被添加到了它的Activity中,那么它返回true,否则返回false. public final boole ...

  10. C复数的四则运算

    #include<stdio.h> void judge(int True,int Fake) {     if (True == 0)     {         if (Fake == ...