找回密码
当前位置：前端开发者 > jQuery > 正文

WEB网页jQuery判断上下滑动

2018-08-24 23:20:43 分类：jQuery 阅读(181) 评论(0)

如何快速开发网站前端 网站前端开发工作总结 web前端开发国外网站

功能目标：下滑时隐藏、上划时显示底部导航栏，在页首页尾也显示底部导航栏。

有时候需要用到，判断页面是向上还是向下滚动了。

原理：
scroll()滚动事件发生时，
拿当前的scrollTop和之前的scrollTop对比
如果变大了，表示向下滚动（scrollTop值变大）；
如果变小了，表示向上滚动（scrollTop值变小）。

javascript 代码

$(document).ready(function(){
varp=0,t=0;
$(window).scroll(function(e){
p=$(this).scrollTop();
if(t<=p){//下滚
…….
}
else{//上滚
…….
}
t=p;;//更新上一次scrollTop的值
});
});

个人实例：
html 代码

<!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>

 

实例建议新窗口预览或保存成.html文件打开；
尚未兼容旧版IE。

前端开发环境 有哪几种 notepad 前端开发环境 手机网站前端开发案例

» 本文来自：前端开发者 » 《WEB网页jQuery判断上下滑动》
» 本文链接地址：https://www.rokub.com/5392.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论