Second slide

您现在的位置是:网站首页折腾不止-web开发 > 文章内容

WEB网页jQuery判断上下滑动

admin 2018-11-04 09:41:11 浏览



如何快速开发网站前端 网站前端开发工作总结 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 代码

<html lang=”en”>
 
    
    
    />
    
    
    <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(‘

winH: ‘ + winH + ‘

winST: ‘ + winST + ‘

docH: ‘ + docH + ‘

’); //滑动时显示刷新各项值
                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>
 
 
    
 
        
        
 
            

show navbar

        
        
 
        
1
        
2
    
    
 
        

Navbar

    
 

 

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

 

上一篇:第一页

下一篇:最后一页