<!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. poj 2987 最大权闭合图

    Language: Default Firing Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 8744   Accept ...

  2. LINUX内核分析期末总结

    韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.课程总结 1 ...

  3. 计算机病毒实践汇总二：bufferzone沙盘使用体验

    在尝试学习分析的过程中,判断结论不一定准确,只是一些我自己的思考和探索.敬请批评指正! 1. 安装bufferzone及其简单使用 (1)安装BufferZone BufferZone的msi安装文件 ...

  4. __future__

    [__future__] __future__用于改变python特性. 参考:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb4 ...

  5. 如何在Ubuntu上更新Node.js

    自己系统上一直用的1.0版本的,想要更新直接apt肯定不行的.于是找了一种比较方便的安装方式. 如果想安装最新的 6.x 版本 只需要 #Using Ubuntu curl -sL https://d ...

  6. 使用Resource Owner Password Credentials Grant授权发放Token

    对应的应用场景是:为自家的网站开发手机 App(非第三方 App),只需用户在 App 上登录,无需用户对 App 所能访问的数据进行授权. 客户端获取Token: public string Get ...

  7. 高频交易策略之Penny Jump[z]

    高频交易策略之Penny Jump 今天假设有一个笨笨的大型机构投资人(共同基金,银行,退休基金....),他想要买进一只股票,但又不想挂市价买进,所以就在市场里面挂了一张要买进的大单.这时候所有市场 ...

  8. EF 6 for mysql

    1. NuGet安装 MySql.Data.MySql.Data.Entity 2.安装Entity Framework 6 Tools for Visual Studio 2012 & 20 ...

  9. Jquery点击发送按钮后，按钮文本倒计时

    1.html代码 <input type="number" id="mobileNo" placeholder="请输入手机号" /& ...

  10. NameError: name 'pip' is not defined

    NameError: name 'pip' is not defined 直接去cmd下执行...pip pip install virtualenv