JQ判断上下滑动
来源:互联网 发布:淘宝魔改坊 编辑:程序博客网 时间:2024/05/22 00:39
功能目标:下滑时隐藏、上划时显示底部导航栏,在页首页尾也显示底部导航栏。
原理:
scroll()滚动事件发生时,
拿当前的scrollTop和之前的scrollTop对比
如果变大了,表示向下滚动(scrollTop值变大);
个人实例:
原理:
scroll()滚动事件发生时,
拿当前的scrollTop和之前的scrollTop对比
如果变大了,表示向下滚动(scrollTop值变大);
如果变小了,表示向上滚动(scrollTop值变小)。
$(document).ready(function(){ var p=0,t=0; $(window).scroll(function(e){ p = $(this).scrollTop(); if(t<=p){//下滚 ....... } else{//上滚 ....... } t = p;; //更新上一次scrollTop的值 }); });
个人实例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>JQscroll</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none; box-sizing:border-box; } .navbar{width: 100%; background-color: #ACF; position:fixed; bottom:0; left:0; transition:opacity .3s ease,transform .3s ease; } /* 底部导航栏的属性及过渡属性 */ .navbarhide{opacity:0; transform:translateY(100%); } /* 底部导航栏隐藏时的属性 */ .content{width: 50%; margin: 0 auto; background-color: #AFC; position:relative; } .bd1,.bd2{width: 100%; height: 1px; border-bottom: 1px dotted #000; position:absolute; } .headholder{width: 50%; background-color: #F60; margin:0 auto; text-align: center; } #monitor{position:fixed; left:30%; top:50%; padding:10px; border: 1px solid #000; } </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function(){ function monitor(){ /*var winH=$(window).height();*/ var winH = window.innerHeight; //获取浏览器窗口高度,若要支持IE需要在此处做兼容 var winST = $(window).scrollTop(); //获取scrollTop var docH=$(document).height(); //获取文档高度 var arr=[winH,winST,docH]; var winSTbefore=0; //声明一个变量,用于装触发scroll事件的上一个scrollTop $('#navbar').css('height',winH/10+'px'); //设置底部导航条高度 $('#content').css({'height':winH*3}); //撑开文档高度 $('.headholder').css({'height':winH/10+'px','line-height':winH/10+'px'}); $('.bd1').css({'top':winH}); //分屏线 $('.bd2').css({'top':winH*2}); //分屏线 $('#navbar>h2').css('line-height',winH/10+'px'); //设置导航栏文字行高 $('#monitor').html('<h3>winH: '+winH+'</h3><h3>winST: '+winST+'</h3><h3>docH: '+docH+'</h3>'); //滑动时显示刷新各项值 return arr; } monitor(); $(window).scroll(function(){ //页面滑动时 var arr=monitor(); var winH=arr[0]; //声明winH 浏览器窗口高度 var winST = arr[1]; //声明winST scrollTop var docH = arr[2]; //声明docH 文档高度 /*console.log('winST:'+winST+' winH:'+winH+' docH:'+docH+' arr: '+arr);*/ if(winST<=winH/10){ $('#navbar').removeClass('navbarhide'); //在首屏时显示导航条 }else if(winST+winH>=docH){ $('#navbar').removeClass('navbarhide'); //到达底部时显示 }else if(winST>winSTbefore){ $('#navbar').addClass('navbarhide'); //向下滑动时隐藏 }else if(winST<winSTbefore){ $('#navbar').removeClass('navbarhide'); //向上滑动时显示 } winSTbefore=winST; //更新winSTbefore的值 /*setTimeout(function(){winSTbefore=winST;},0)*/ }) }) </script></head><body> <div id="content" class="content"> <!-- 撑开高度 --> <div class="headholder" align="center"><h2>show navbar</h2></div> <!-- 此区域内navbar展示 --> <div id="monitor"></div> <!-- 显示各项数值 --> <div class="bd1" align="center">1</div> <!-- 第一屏线 --> <div class="bd2" align="center">2</div> <!-- 第二屏线 --> </div> <div id="navbar" class="navbar" align="center" ><h2>Navbar</h2></div> <!-- 底部导航栏 --></body></html>
点击新窗口预览
0 0
- JQ判断上下滑动
- Android OnGestureListener 判断手势上下滑动
- web前端,实现上下翻页,支持鼠标滑动翻页h5+css+jq
- jq 文字上下滚动
- andorid 上下滑动状态判断和listview分页显示
- js判断左右上下滑动触发的事件
- jQuery -- touch事件之滑动判断(左右上下方向)
- jQuery -- touch事件之滑动判断(左右上下方向)
- Js判断H5上下滑动方向及滑动到顶部和底部判断
- Gesture--向上滑动,上下滑动
- JQ滑动门
- jq滑动效果
- TextSlidingMenu上下滑动效果
- GridView不需要上下滑动
- 上下滑动的Listview
- 嵌套editview上下滑动
- ListView上下滑动监听
- ListView上下自动滑动
- 总结String,StringBuilder,StringBuffer的区别以及注意事项
- Nginx+Tomcat基于Docker的搭建
- Tensorflow的Bazel编程(一)
- 程序员面试金典第二章:链表(6) 链表环路
- 如何把Web工程部署到Tomcat的根目录webapps的ROOT下
- JQ判断上下滑动
- 蛮不错的GitHub上传教程 mark下
- Caffe安装步骤及mnist数据集测试
- dll库总结1
- 【ITOO】---关于List的remove操作
- 织梦DEDE模板调用标签大全
- 开发应用识别软件遇到的一些windows编程技能
- Android初级教程 - Include(复用layout)的使用方式(一)
- centos安装kubernetes1.3(一)